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/
Related
I am trying to use the following code which works well. I'm doing a CRUD operation. When I create an object then it works very well. However when I want to edit then this input field was hidden. I want to hide and show based on values.
$(document).ready(function() {
// debugger;
$('#isRequested').change(function() {
if ($(this).val() == "true" && $(this).val() != "select") {
$('.entity').show();
} else {
$('.entity').hide();
}
})
});
$(document).ready(function() {
$('#isApproved').change(function() {
if ($(this).val() != "true" && $(this).val() != "select") {
$('#denial').show();
} else {
$('#denial').hide();
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 row">
<div class="col-md-4">
<label class="col-form-label text-lg-left" asp-for="IsPreviouslyRequestedAssistance"></label>
<select class="form-control click" id="isRequested" asp-for="IsPreviouslyRequestedAssistance">
<option value="select">Please Select</option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
<div class="col-md-4 entity showup" style="display:none">
<label id="EntityName" class="col-form-label " asp-for="EntityName"></label>
<input type="text" id="EntityName" asp-for="EntityName" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 row entity" style="display: none">
<div class="col-md-4 ">
<label asp-for="WasApproved" class="col-form-label"></label>
<select id="isApproved" class="form-control " asp-for="WasApproved">
<option value="select">Please Select</option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
<div class="col-md-4" id="denial" style="display: none">
<label asp-for="ReasonForDenial" class="col-form-label"></label>
<input type="text" class="form-control" asp-for="ReasonForDenial">
</div>
</div>
</div>
Can you tell me what should I do?
I have some div that will show depending on the select value. Suppose there are two input fields name 'Apartment and Bechelor' If I select 'Apartment' some div and select field will show related to the apartment. The problem I am facing is, I can't clear the field value when selecting another. Like, after selecting 'Apartment', I will select Bachelor. Now it should be clear the value of the field which was under the apartment so that If I again select 'Apartment', I will get default values or clean fields.
<div id="residential" >
<input type="radio" value="apartment" id="type_apartment" name="type" >
<label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
<input type="radio" value="bachelor" id="type_bachelor" name="type">
<label for="type_bachelor" class="radio-inline"> Bechelor </label>
</div>
<!-- show this when apartment select -->
<div class="form-group " id="tenant-flat">
<select id="tenant-type" class="form-control" name="tenant">
<option value="">Anyone</option>
<option value="family">Family</option>
<option value="bechelor" >Bechelor</option>
</select>
</div>
<div class="form-group " id="flat-type">
<div class="col-sm-12">
<select id="" class="form-control" name="flat-type">
<option value="">Select Flat Type</option>
<option value="sublet" >Sublet</option>
<option value="full-flat" >Full Flat</option>
</select>
</div>
</div>
<!-- show this when bechelor select -->
<div class="form-group " id="r-type">
<div class="col-sm-12">
<select id="room" class="form-control" name="room_type">
<option value="">Select Room Type</option>
<option value="seat">Seat</option>
<option value="room" >Room</option>
</select>
</div>
</div>
<div class="form-group " id="tenant">
<div class="col-sm-12">
<select id="" class="form-control" name="tenant">
<option value="">Select Member</option>
<option value="family" >Family</option>
<option value="student" >Student</option>
<option value="job-holder" >Job Holder</option>
</select>
</div>
</div>
<script>
$(document).ready(function(){
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-flat').hide();
$('#flat-type').hide();
$('.pretty input[type="radio"]').click(function(){
if($(this).attr('value') == 'apartment'){
$('#tenant-flat').show();
}
else{
$('#flat-type').hide();
}
});
var showDiv = document.getElementById("tenant-type");
showDiv.onchange = function(){
var hiddenDiv = document.getElementById("flat-type");
hiddenDiv.style.display = (this.value == "family") ? "block":"none";
var genderDiv = document.getElementById("gender");
genderDiv.style.display = (this.value == "bechelor") ? "block":"none";
};
$('.pretty input[type="radio"]').click(function(){
if($(this).attr('value') == 'bachelor' || $(this).attr('value') == 'sublet' || $(this).attr('value') == 'hostel' ){
$('#r-type').show();
$('#tenant').show();
$('#tenant-type').hide();
}
else{
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-type').show();
}
});
});
</script>
to reset the dropdown options you can set the value of the select elements selectIndex property to 0 with this line:
$('.form-control').prop('selectedIndex', 0);
and in your code:
$(document).ready(function(){
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-flat').hide();
$('#flat-type').hide();
$('#residential input[type="radio"]').click(function(){
if($(this).attr('value') == 'apartment'){
$('#tenant-flat').show();
$('#flat-type').show();
$('#r-type').hide();
$('#tenant').hide();
}
else{
$('#r-type').show();
$('#tenant').show();
$('#flat-type').hide();
$('#tenant-flat').hide();
}
$('.form-control').prop('selectedIndex', 0);
});
$('#tenent-type').on('change', function() {
if($('#flat-type').val =='family') {
$('#flat-type').show();
} else {
$('#flat-type').hide();
}
if($('#gender').val =='bechelor') {
$('#gender').show();
} else {
$('#gender').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="residential" >
<input type="radio" value="apartment" id="type_apartment" name="type" >
<label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
<input type="radio" value="bachelor" id="type_bachelor" name="type">
<label for="type_bachelor" class="radio-inline"> Bechelor </label>
</div>
<!-- show this when apartment select -->
<div class="form-group " id="tenant-flat">
<select id="tenant-type" class="form-control" name="tenant">
<option value="">Anyone</option>
<option value="family">Family</option>
<option value="bechelor" >Bechelor</option>
</select>
</div>
<div class="form-group " id="flat-type">
<div class="col-sm-12">
<select id="" class="form-control" name="flat-type">
<option value="">Select Flat Type</option>
<option value="sublet" >Sublet</option>
<option value="full-flat" >Full Flat</option>
</select>
</div>
</div>
<!-- show this when bechelor select -->
<div class="form-group " id="r-type">
<div class="col-sm-12">
<select id="room" class="form-control" name="room_type">
<option value="">Select Room Type</option>
<option value="seat">Seat</option>
<option value="room" >Room</option>
</select>
</div>
</div>
<div class="form-group " id="tenant">
<div class="col-sm-12">
<select id="" class="form-control" name="tenant">
<option value="">Select Member</option>
<option value="family" >Family</option>
<option value="student" >Student</option>
<option value="job-holder" >Job Holder</option>
</select>
</div>
</div>
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>
The class hidden should be toggling based on if the checkbox is checked. One of the drop-down menus should be hidden and the other be displayed.
maybe my ternary operator isn't set up properly.
Thanks in advance.
function toggleButton() {
var toggler = $("input[name='toggler']").prop('checked');
var awardOptions = $('#awardOptions');
var yearOptions = $('#yearOptions');
var awardShow = awardOptions.removeClass('hidden');
var yearShow = yearOptions.removeClass('hidden');
var awardHide = awardOptions.addClass('hidden');
var yearHide = yearOptions.addClass('hidden');
console.log(toggler);
return (toggler) ? (awardShow,yearHide) : (awardHide, yearShow);
}
$('#toggler').on('click', function(){
toggleButton();
});
.hidden {
display: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggleWrapper">
<input type="checkbox" class="dn" name="toggler" id="toggler" checked/>
<label for="toggler" class="toggle">
<span class="toggle__handler"></span>
</label>
</div>
<div class="inputBox" id="filter">
<div class="dropdown hidden" id="yearOptions">
<select id="hof-year">
<option value="0">Choose a Year</option>
<option value="2016">2016</option>
</select>
</div>
<div class="dropdown" id="awardOptions">
<select id="hof-accomp">
<option value="0">Choose an Award</option>
</select>
</div>
</div>
This is the function I'm using to trigger the toggleButton function.
$('#toggler').on('click', function(){
toggleButton();
});
You can use var awardShow = awardOptions.toggleClass('hidden'); instead of using addClass or removeClass.
$('#toggler').on('click', function(){
$('#awardOptions, #yearOptions').toggleClass('hidden');
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggleWrapper">
<input type="checkbox" class="dn" name="toggler" id="toggler" checked/>
<label for="toggler" class="toggle">
<span class="toggle__handler"></span>
</label>
</div>
<div class="inputBox" id="filter">
<div class="dropdown hidden" id="yearOptions">
<select id="hof-year">
<option value="0">Choose a Year</option>
<option value="2016">2016</option>
</select>
</div>
<div class="dropdown" id="awardOptions">
<select id="hof-accomp">
<option value="0">Choose an Award</option>
</select>
</div>
</div>
Using Jquery chained module, chained select works but with multiple parents doesn't work.
I tried to remove bootstrap, validator, bootcomplete ... without success.
I also tried with other names and values .
Can someone help me ? Thanks.
<form class="form-horizontal" id="formulaire" role="form" data-toggle="validator"">
<hr/>
<header class="row" style="margin-bottom: 20px;">
<div class="col-md-12"><h3 class="text-center">FORMATION</h2></div>
</header>
<div class="row">
<div class="col-md-4 form-group">
<label for="formation" class="col-md-4 control-label">Intitulé de la formation<span style="color: red">*</span> :</label>
<div class="col-md-8">
<select id="formation" class="form-control" name="formation" required >
<option value=""></option>
<option value="1">BTS Assistant Manager</option>
<option value="2">Gestionnaire des ressources humaines</option>
</select>
<div class="help-block with-errors"></div></div>
</div>
<div class="col-md-4 form-group">
<label for="niveau" class="col-md-4 control-label">Année<span style="color: red">*</span> :</label>
<div class="col-md-8">
<select id="niveau" class="form-control" name="niveau" required >
<option value=""></option>
<option class="1" value="1">BTS 1</option>
<option class="1" value="2">BTS 2</option>
<option class="2" value="5">BAC+3</option>
</select>
<div class="help-block with-errors"></div></div>
</div>
<div class="col-md-4 form-group">
<label for="sect" class="col-md-4 control-label">Section<span style="color: red">*</span> :</label>
<div class="col-md-8">
<select id="section" class="form-control" name="section" required >
<option value=""></option>
<option class="1\1" value="1">S1</option>
<option class="1\1" value="2">S2</option>
<option class="1\1" value="3">S3</option>
<option class="1\2" value="1">S1</option>
<option class="2\5" value="1">S1</option>
<option class="2\5" value="2">S2</option>
</select>
<div class="help-block with-errors"></div></div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Envoyer</button>
</div>
</form>
</div><!-- /.container -->
<script type="text/javascript" src="http://127.0.0.1/assets/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="http://127.0.0.1/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="http://127.0.0.1/assets/js/validator.min.js"></script>
<script type="text/javascript" src="http://127.0.0.1/assets/js/jquery.bootcomplete.js"></script>
<script type="text/javascript" src="http://127.0.0.1/assets/js/jquery.chained.min.js"></script>
<script type="text/javascript">
$('#etudiant_adresse_code_postal').bootcomplete(
{
url:'../ajax/codepostal/',
method:'post',
minLength:2
}
);
$('#etudiant_adresse_ville').bootcomplete(
{
url:'../ajax/commune/',
minLength : 0,
method:'post',
formParams:
{
'cp' : $('#etudiant_adresse_code_postal')
}
}
);
$('#niveau').chained('#formation');
$("#section").chained("#formation, #niveau");
</script>