We Keep Coding

How to change select box value using JCF plugin?

I have a select box that uses jcf plugin. As documenation says we have to refresh method to change the value but it is not changing. Below here is what i have tried?
$(function() {
jcf.replaceAll();
});
function changeValue() {
$("#mgloc_npgpo").val('1')
jcf.getInstance($("#mgloc_npgpo")).refresh()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcf/1.2.3/js/jcf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcf/1.2.3/js/jcf.select.js"></script>
<div class="select-holder"><label>Selection</label>
<div class="select-wrap"><input type="hidden" id="mgloc_340b" value=""/>
<div class="select-wrap"><input type="hidden" id="mgloc_340b" value=""/>
<select id="mgloc_npgpo" multiple="multiple"
data-jcf="{"wrapNative": false, "wrapNativeOnMobile": false, "useCustomScroll": false, "multipleCompactStyle": true}" class="jcf-hidden">
<option value="" selected="selected">Select Non-Primary</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<div class="errorMsg hide"> </div>
</div>
<div class="errorMsg hide"> </div>
</div>
<button style="margin-top: 100px;" onClick="changeValue()">change value</button>
</div>

You have a typo
Your id name mgloc_npgpo not mgloc_ngpo
In your js code you have used mgloc_ngpoat every place. which should be mgloc_npgpo
$(function() {
jcf.replaceAll();
});
function changeValue() {
$("#mgloc_npgpo").val('1')
jcf.getInstance($("#mgloc_npgpo")).refresh()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcf/1.2.3/js/jcf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcf/1.2.3/js/jcf.select.js"></script>
<div class="select-holder"><label>Selection</label>
<div class="select-wrap"><input type="hidden" id="mgloc_340b" value=""/>
<select jcf id="mgloc_npgpo"
data-jcf="{"wrapNative": false, "wrapNativeOnMobile": false, "useCustomScroll": false, "multipleCompactStyle": true}" class="jcf-hidden">
<option value="" selected="selected">Select Non-Primary</option>
<option value="1" >value1</option>
<option value="2" >value2</option>
</select>
<div class="errorMsg hide"> </div>
</div>
<button onClick="changeValue()">change value</button>
</div>

Get data from modal input, calculate then display result in modal

I have some working jQuery that grabs the value from an input from which the user enters, and then also grabs a value from a hidden field, the jQuery then performs the necessary calculations and displays the result.
The issue I am having is when I put the fields into a modal, it doesn't work, even when I try and state the modal ID before the input ID.
Can someone help me get this working as needed?
$(function() {
$(document).ready(function() {
$("#demoModal #qty").keyup(function() {
totalTP = $("#demoModal #qty").val() * $("#demoModal #price").val() / 100;
$("#demoModal #totalTP").val(totalTP);
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<label>Enter your taxable monthly profit</label>
<input name="qty" id="qty" type="text" />
<input hidden name="price" id="price" type="hidden" value="19" /><br />
<label>Deducitble Tax Available</label>
<input name="totalTP" id="totalTP" type="text" />
<br>
<br>
<form id='fm'>
<label>HR:</label>
<select class="first">
<option disabled selected value="0">Select Plan</option>
<option value="0">No Plan</option>
<option value="50">HR Plan</option>
<option value="100">HR Pro</option>
<option value="200">HR Pro+</option>
<option value="400">HR Pro Plan</option>
</select>
<label>Accounting:</label>
<select class="second">
<option disabled selected value="0">Select Plan</option>
<option value="0">No Plan</option>
<option value="50">Accounting Plan</option>
<option value="100">Accounting Pro</option>
<option value="200">Accounting Pro+</option>
<option value="400">Accounting Pro Plan</option>
</select>
<label>Graphic Design & Marketing:</label>
<select class="third">
<option disabled selected value="0">Select Plan</option>
<option value="0">No Plan</option>
<option value="50">Graphic Design Plan</option>
<option value="100">Graphic Design Pro</option>
<option value="200">Graphic Design Pro+</option>
<option value="400">Graphic Design Pro Plan</option>
</select>
<input hidden type="text" class="form-control" id="temp" name="temp">
<input hidden type="text" class="form-control" id="bc" name="bc">
<input hidden type="text" class="form-control" id="de" name="de">
</form>
<br>
<label>Plan Costs:<div id="total"></div> </label>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
View on jsFiddle

jQuery is visible doesn't work

I'm try to make an input non-editable after user click on icon and will chose date by select. So, i tought if i did a jQuery script for check if that date salect is visible than make a date text input non-editable.
But it doesn't work, i tried it woth .css and .is(":visible") but no one worked.
My code:
$(document).ready(function() {
if ($('#dropdown-date').is(':visible')) {
document.getElementById('datumNaroz').disabled = true;
} else {
document.getElementById('datumNaroz').disabled = false;
}
if ($('#dropdown-date').css('display') == 'none') {
document.getElementById('datumNaroz').disabled = false;
} else {
document.getElementById('datumNaroz').disabled = true;
}
$('#dropdown-date').click(function(event) {
event.stopPropagation();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="form-group">
<label for="datumNaroz">Birth date</label>
<div class="row">
<div class="col-6">
<div class="input-group datum-group">
<input class="form-control" id="datumNaroz" type="text" placeholder="Day / Month / Year" name="datumNaroz" maxlength="14" autocomplete="off" required>
<div class="input-group-append" id="pickerToggle" data-toggle="dropdown">
<div class="input-group-text">
<i class="fas fa-calendar-alt"></i>
</div>
</div>
<div class="custom-date dropright">
<div class="dropdown-menu" id="dropdown-date">
<div class="container">
<div class="input-group">
<select class="custom-select" id="den">
<option value="day" disabled selected hidden>Day</option>
<option value="02">02</option>
</select>
<select class="custom-select" id="den">
<option value="month" disabled selected hidden>Month</option>
<option value="09">September</option>
</select>
<select class="custom-select" id="den">
<option value="year" disabled selected hidden>Year</option>
<option value="1995">1995</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

JQuery chosen did not show search box?

I have a form with few fields that should use drop down chosen. I have created a class on each select tag. This class is used to apply chosen on each element. I'm not getting any errors once a form is loaded but chosen doesn't work. Only what is displayed on the screen is this:
Chosen Image: https://i.stack.imgur.com/TQEK5.png
Here is my code:
<form name="frmDemo" id="frmDemo" method="POST" action="#" class="frmLayout">
<fieldset>
<legend>Demographic</legend>
<div class="formItem">
<label for="city" class="required">City:</label>
<select name="city" id="city" class="chosen">
<option value="">Choose City</option>
<cfoutput query="getCity">
<option value="#cityNum#">#cityName#</option>
</cfoutput>
</select>
</div>
<div class="formItem">
<p align="center"><input type="button" name="chSubmit" id="chSubmit" value="Submit"></p>
</div>
</fieldset>
</form>
Here is JQuery:
$(document).ready(function() {
$('.chosen').each(function(){
$(this).chosen();
});
});

Should be your reference not set up properly, use the following:
Load CSS -> jQuery -> chosen
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
$(document).ready(function() {
$('.chosen').each(function() {
$(this).chosen();
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
<form name="frmDemo" id="frmDemo" method="POST" action="#" class="frmLayout">
<fieldset>
<legend>Demographic</legend>
<div class="formItem">
<label for="city" class="required">City:</label>
<select name="city" id="city" class="chosen">
<option value="">Choose City</option>
<cfoutput query="getCity">
<option value="#cityNum#">#cityName#</option>
</cfoutput>
</select>
</div>
<div class="formItem">
<p align="center">
<input type="button" name="chSubmit" id="chSubmit" value="Submit">
</p>
</div>
</fieldset>
</form>

show/hide div on select option using jQuery

I built this code in order to show/hide div when an option is selected from the list but nothing happen when i click on an option.
My HTML :
<div class="row">
<select name="type" id="type" style="margin-left:57px; width:153px;">
<option ame="l_letter" value="l_letter">Large Letter</option>
<option name="parcel" value="parcel">Parcel</option>
</select>
</div>
<div class="row" id="row_dim">
<input type="text" name="length" class="dimension" placeholder="Length">
</div>
My jQuery :
$(function() {
$('#row_dim').hide();
$('#type').change(function(){
if($('#type').val() == 'parcel') {
$('#row_dim').show();
} else {
$('#row_dim').hide();
}
});
});

if your code generate to dynamic than used to this $(document).on as like this
$(function() {
$('#row_dim').hide();
$(document).on('change', '#type', function(){
if($('#type').val() == 'parcel') {
$('#row_dim').show();
} else {
$('#row_dim').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="row">
<select name="type" id="type" style="margin-left:57px; width:153px;">
<option ame="l_letter" value="l_letter">Large Letter</option>
<option name="parcel" value="parcel">Parcel</option>
</select>
</div>
<div class="row" id="row_dim">
<input type="text" name="length" class="dimension" placeholder="Length">
</div>

Add jquery library file
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<div class="row">
<select name="type" id="type" style="margin-left:57px; width:153px;">
<option ame="l_letter" value="l_letter">Large Letter</option>
<option name="parcel" value="parcel">Parcel</option>
</select>
</div>
<div class="row" id="row_dim">
<input type="text" name="length" class="dimension" placeholder="Length">
</div>
https://jsfiddle.net/9wLn265s/