We Keep Coding

jQuery Dropdown Show/Hide div not work fine

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?

Show/hide div and clear filed value when change

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>

JQUERY replace text on data-empty_label value

I tried to change the default empty value "" with friendly labels however I was not successful for subcategory and name selects since data is coming dynamically from django. category works fine since there is an empty option when page loads however subcategory and name load on select data-empty_label "----------" instead and no options are visible.
<div class="form-row">
<input type="hidden" name="csrfmiddlewaretoken" value="xxxxx">
<div class="form-group custom-control col-md-3">
<select name="category" class="custom-select custom-select-lg" required id="id_category">
<option value="" selected>---------</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<div class="form-group custom-control col-md-3">
<select name="subcategory" disabled class="custom-select custom-select-lg chained-fk" required id="id_subcategory" data-chainfield="category" data-url="/chaining/filter/xxxxx" data-value="null" data-auto_choose="false" data-empty_label="--------" name="subcategory">
</select>
</div>
<div class="form-group custom-control col-md-3">
<select name="name" disabled class="custom-select custom-select-lg chained-fk" required id="id_name" data-chainfield="subcategory" data-url="/chaining/filter/xxxxx" data-value="null" data-auto_choose="false" data-empty_label="--------" name="name">
</select>
</div>
<div class="form-group col-md-3">
<input type="submit" value="Submit" class="btn-lg btn-success btn-block">
</div>
</div>
<script>
$(document).ready(function() {
$("select").on("change", function() {
if($("select[name='category']").val() == "") {
$("select[name='category'] > option:first-child").text('Category');
$("select[name='subcategory']").prop('disabled', 'disabled');
$("select[name='subcategory'] > option:first-child").text('Subcategory');
$("select[name='name']").prop('disabled', 'disabled');
$("select[name='name'] > option:first-child").text('Recipe');
} else {
$("select[name='subcategory']").removeAttr("disabled");
$("select[name='subcategory'] > option:first-child").text('Subcategory');
}
}).trigger('change');
$("select[name='subcategory']").on("change", function() {
$("select[name='subcategory'] > option:first-child").text('Subcategory');
if($(this).val() == "") {
$("select[name='name']").prop('disabled', 'disabled');
$("select[name='recipename'] > option:first-child").text('Recipe');
} else {
$("select[name='name']").removeAttr("disabled");
$("select[name='ename'] > option:first-child").text('Recipe');
}
}).trigger('change');
});
</script>

How to keep elements in one row conditonally?

I have created a row and inside that row, I have 3 elements, but those 3 elements change to 4 when I select "Other" from the make drop down, and it works absolutely fine. But when I select the "-Other-" from Model dropdown I notice that the model "Other" input field doesn't remain the part of the row and it doesn't work. I'm attaching the following examples for further understanding:
Default:
When I select "other" from make:
When I select "-other" from model:
So to explain it better, I want the model "-other" just like make other i.e all the elements in one row.
Can anyone help, please?
Note: I have achieved the Make "other" using jQuery dynamic class.
Regards,
Bill
var $make = $('#make'),
$model = $('#model'),
$options = $model.find('option');
$('#make').on('change', function() {
if (this.value == '*') {
removeClassDynamicClass();
changeModelDiv();
$("#others").addClass("hide");
$("#others input").attr("disabled", "disabled");
$(".model-div-not-others").removeClass("hide");
$(".model-div-not-others select").removeAttr("disabled");
$(".model-div-for-others").addClass("hide");
$('#model').attr('disabled', 'disabled');
$("#country-registeration").attr('disabled', 'disabled');
$("#opt-details").attr('disabled', 'disabled');
} else if (this.value == 'others') {
if ($('.dynamic-class-4').hasClass('col-lg-4')) {
$('.dynamic-class-4').removeClass('col-lg-4');
$('.dynamic-class-4').addClass('col-lg-3');
}
changeModelDiv();
$("#others").removeClass("hide");
$("#others input").removeAttr("disabled");
$(".model-div-not-others").addClass("hide");
$(".model-div-for-others").removeClass("hide");
$(".model-div-for-others input").removeAttr("disabled");
$('#model').attr('disabled', 'disabled');
$("#opt-details").removeAttr('disabled');
// In-case of other countries added remove the below commented code
//$("#country-registeration").removeAttr('disabled');
} else {
var thisOption = $("#make :selected").data("option");
$model.html($options.filter('[data-option="' + thisOption + '"], [value="0"]'));
$("#model option:eq(0)").prop("selected", true);
removeClassDynamicClass();
changeModelDiv();
$("#others").addClass("hide");
$("#others input").attr("disabled", "disabled");
$(".model-div-not-others").removeClass("hide");
$(".model-div-not-others select").removeAttr("disabled");
$(".model-div-for-others").addClass("hide");
$('#model').removeAttr('disabled');
$("#opt-details").removeAttr('disabled');
// In-case of other countries added remove the below commented code
//$("#country-registeration").removeAttr('disabled');
}
});
function removeClassDynamicClass() {
if ($('.dynamic-class-4').hasClass('col-lg-3')) {
$('.dynamic-class-4').removeClass('col-lg-3');
$('.dynamic-class-4').addClass('col-lg-4');
}
}
function changeModelDiv() {
if ($('#make').val() == 'others') {
$('.model-div-not-others').addClass("hide");
$('.model-div-for-others').removeClass("hide");
$('#model-others').removeAttr("disabled");
$('#model').attr('disabled', 'disabled');
} else {
if ($('.model-div-not-others').hasClass("hide")) {
$('.model-div-not-others').removeClass("hide");
$('.model-div-for-others').addClass("hide");
$('#model').removeAttr("disabled");
$('#model-others').attr('disabled', 'disabled');
}
}
}
$('#model').on('change', function() {
if ($('#model :selected').val() == '- Other -') {
//$('.model-div-not-others').addClass("hide");
$('.model-div-for-others').removeClass("hide");
$('#model-others').removeAttr("disabled");
} else {
$('.model-div-for-others').addClass("hide");
$('#model-others').attr("disabled", "disabled");
}
});
$('#make').trigger('change');
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" rel="stylesheet">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 dynamic-class-4 float-left mb-3">
<label class="car-list-step-label">Make</label>
<select class="form-control custom-select" name="make" id="make">
<option disabled="disabled" selected="selected" value="*">Select vehicle make</option>
<option data-option="1">Acura</option>
<option data-option="2">Abarth</option>
<option value="others">Other</option>
</select>
</div>
<!-- Make Others Details -->
<div id="others" class="col-xs-12 col-sm-6 col-md-4 col-lg-4 dynamic-class-4 float-left mb-3 hide">
<label class="car-list-step-label">Make (others)</label>
<input id="details" name="details" type="text" placeholder="Make" class="form-control car-list-input">
</div>
<!-- Vehicle Model -->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 dynamic-class-4 float-left mb-3">
<div class="model-div-not-others">
<label class="car-list-step-label">Model</label>
<select class="form-control custom-select" name="model" id="model">
<option value="0" disabled="disabled" selected="selected">Select vehicle model</option>
<!-- Acura -->
<option data-option="1">1.6 EL</option>
<option data-option="1">1.7 EL</option>
<option data-option="1">2.3 CL</option>
<option data-option="1">2.5 TL</option>
<option data-option="1">3.0 CL</option>
<option data-option="1">3.2 TL</option>
<option data-option="1">3.5 RL</option>
<option data-option="1">CL</option>
<option data-option="1">CSX</option>
<option data-option="1">EL</option>
<option data-option="1">ILX</option>
<option data-option="1">Integra</option>
<option data-option="1">Legend</option>
<option data-option="1">MDX</option>
<option data-option="1">NSX</option>
<option data-option="1">NSX-T</option>
<option data-option="1">RDX</option>
<option data-option="1">RL</option>
<option data-option="1">RSX</option>
<option data-option="1">SLX</option>
<option data-option="1">TL</option>
<option data-option="1">TSX</option>
<option data-option="1">Vigor</option>
<option data-option="1">ZDX</option>
<option data-option="1">- Other -</option>
<!-- Abarth -->
<option data-option="2">124</option>
<option data-option="2">500</option>
<option data-option="2">500C</option>
<option data-option="2">595</option>
<option data-option="2">595C</option>
<option data-option="2">695</option>
<option data-option="2">Grande Punto</option>
<option data-option="2">Punto Evo</option>
<option data-option="2">Spider Cabrio</option>
<option data-option="2">- Other -</option>
</select>
</div>
</div>
<!-- Vehicle Model Others -->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 dynamic-class-4 float-left mb-3">
<div class="model-div-for-others hide">
<label class="car-list-step-label">Model (others)</label>
<input disabled id="model-others" name="models" type="text" placeholder="Model" class="form-control car-list-input">
</div>
</div>
<!-- Vehicle Optional Details -->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 dynamic-class-4 float-left mb-3">
<label class="car-list-step-label">Details (optional)</label>
<input id="opt-details" name="opt-details" type="text" placeholder="Additional details" class="form-control car-list-input">
</div>
</div>

It is not being formatted like the other dropdowns because it is currently within the Model's col based div. You should put your Model (others) element into it's own col based div, just like the rest of the dropdowns like so:
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 dynamic-class-4 float-left mb-3">
<div class="model-div-for-others hide">
<label class="car-list-step-label">Model (others)</label>
<input disabled id="model-others" name="models" type="text" placeholder="Model" class="form-control car-list-input">
</div>
</div>

javascript hide/show function is not working

This is the basic html page
<div class="col-lg-10">
<div class="form-group">
<select class="form-control" id="">
<option value="" hidden>Select Venue Type</option>
<option onclick="myFunction()">Theme Restaurant</option>
<option onclick="myFunction()">Blah restaurant</option>
<option onclick="myFunction()">Flana Restaurant</option>
<option onclick="myFunction()">Woops Restaurant</option>
</select>
</div>
<div class="form-group">
<div class="venue-type" id="restaurant-form">
<div class="row">
<div class="col-md-5" id="bsc-edit">
<div class="form-group">
<label for="city">Venue Name<sup class = "venue-imp">*</sup>
</label>
<input type="text" class="form-control" id="venue-name" placeholder="Jhanqar Banquet Hall" name="name">
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-5">
<div class="form-group">
<label for="city">Venue Price<sup class = "venue-imp">*</sup>
</label>
<input type="text" class="form-control" id="venue-price" placeholder="Jhanqar Banquet Hall" name="price">
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
</div>
i want my dropdown list to show a form when clicked and i have tried using javascript function here, but it is not working the form is showing as it is and nothing is working with onclick. Help me to do it as the form is not being shown when clicked but it is shown directly
this is the javascript code;
<script>
function myFunction() {
var x = document.getElementById("restaurant-form");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>

Yes as per #gurvder372 you can't use onclick for option.You can also use an inline event assignment for this Like:
<select class="form-control" id="" onchange="javascript:return myFunction(event);">
<option value="" hidden>Select Venue Type</option>
<option>Theme Restaurant</option>
<option>Blah restaurant</option>
<option>Flana Restaurant</option>
<option>Woops Restaurant</option>
</select>
<script>
function myFunction(event)
{
var index_opt = event.target.selectedIndex;
if ( index_opt > 0 )
{
var x = document.getElementById("restaurant-form");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
}
</script>

onclick is not supported on option tag, You need to add event listener to the select instead
document.querySelector( "select[id]" ).addEventListener( "change", myFunction );
In the myFunction method you can show/hide form based on which option is selected.
function myFunction(event)
{
var selection = event.target.selectedIndex;
var x = document.getElementById("restaurant-form");
x.style.display = selection >= 1 ? "block" : "none";
}
Demo
function myFunction(event)
{
var selection = event.target.selectedIndex;
var x = document.getElementById("restaurant-form");
x.style.display = selection >= 1 ? "block" : "none";
}
document.querySelector( "select[id]" ).addEventListener( "change", myFunction );
<div class="col-lg-10">
<div class="form-group">
<select class="form-control" id="" >
<option value="">Select Venue Type</option>
<option>Theme Restaurant</option>
<option>Blah restaurant</option>
<option>Flana Restaurant</option>
<option>Woops Restaurant</option>
</select>
</div>
<div class="form-group">
<div class="venue-type" id="restaurant-form">
<div class="row">
<div class="col-md-5" id="bsc-edit">
<div class="form-group">
<label for="city">Venue Name<sup class = "venue-imp">*</sup>
</label>
<input type="text" class="form-control" id="venue-name" placeholder="Jhanqar Banquet Hall" name="name">
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-5">
<div class="form-group">
<label for="city">Venue Price<sup class = "venue-imp">*</sup>
</label>
<input type="text" class="form-control" id="venue-price" placeholder="Jhanqar Banquet Hall" name="price">
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
</div>