We Keep Coding

How to show-hide div element in JavaScript as per select element value?

Here are options (option 0, option 1 and option 2). If option 1 is selected, the videoShowHide should be shown, and hide the onlineShowHide and handoutShowHide.
HTML:
document.getElementById('type').onchange(function() {
if (document.getElementById('type').value === 0) {
document.getElementById('onlineShowHide').classList.add('d-block');
document.getElementById('handoutShowHide').classList.add('d-none');
document.getElementById('videoShowHide').classList.add('d-none');
}
if (document.getElementById('type').value === 1) {
document.getElementById('onlineShowHide').classList.add('d-none');
document.getElementById('handoutShowHide').classList.add('d-block');
document.getElementById('videoShowHide').classList.add('d-none');
}
if (document.getElementById('type').value === 2) {
document.getElementById('onlineShowHide').classList.add('d-none');
document.getElementById('handoutShowHide').classList.add('d-none');
document.getElementById('videoShowHide').classList.add('d-block');
}
})
<div class="col-lg-6 mb-3">
<label for="type" class="form-label">نوع</label>
<select class="form-select" id="type" name="type">
<option value="0">Online</option>
<option value="1">Video</option>
<option value="2">Handout</option>
</select>
</div>
<div class="col-lg-6 mb-3" id="onlineShowHide">
<label for="online" class="form-label">Online</label>
<input type="text" class="form-control" id="online" name="online">
</div>
<div class="col-lg-6 mb-3 d-none" id="videoShowHide">
<label for="video" class="form-label">Video</label>
<input type="file" class="form-control" id="video" name="video">
</div>
<div class="col-lg-6 mb-3 d-none" id="handoutShowHide">
<label for="handout" class="form-label">Handout</label>
<input type="file" class="form-control" id="handout" name="handout">
</div>

To add an event you can do it using addEventListener or assign a function to this event like this: document.getElementById('type').onchange = function() {}.
When you retrieve the value from the #type element it will be a string and not a number.
You are trying to add d-block to the element to show it but you are not removing the already existing d-none class so you should rather remove the d-none class to show the element.
Example:
let onlineShowHide = document.getElementById('onlineShowHide');
let handoutShowHide = document.getElementById('handoutShowHide');
let videoShowHide = document.getElementById('videoShowHide');
let type = document.getElementById('type');
type.onchange = function () {
onlineShowHide.classList.add('d-none');
videoShowHide.classList.add('d-none');
handoutShowHide.classList.add('d-none');
if(type.value === '0') {
onlineShowHide.classList.remove('d-none');
}
if(type.value === '1') {
videoShowHide.classList.remove('d-none');
}
if(type.value === '2') {
handoutShowHide.classList.remove('d-none');
}
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-6 mb-3">
<label for="type" class="form-label">نوع</label>
<select class="form-select" id="type" name="type">
<option value="0">Online</option>
<option value="1">Video</option>
<option value="2">Handout</option>
</select>
</div>
<div class="col-lg-6 mb-3" id="onlineShowHide">
<label for="online" class="form-label">Online</label>
<input type="text" class="form-control" id="online" name="online">
</div>
<div class="col-lg-6 mb-3 d-none" id="videoShowHide">
<label for="video" class="form-label">Video</label>
<input type="file" class="form-control" id="video" name="video">
</div>
<div class="col-lg-6 mb-3 d-none" id="handoutShowHide">
<label for="handout" class="form-label">Handout</label>
<input type="file" class="form-control" id="handout" name="handout">
</div>

Disable a select box until a textbox is filled

I have a textbox and a select box:
<div class="form-group col-xs-12 col-sm-3">
<div class="input-group " >
<span class="input-group-addon white" >Weight</span>
<input class="form-control weight" title="Enter the gross weight" type="text" id="weight" />
</div>
</div>
<div class="form-group col-xs-12 col-sm-3">
<div class="input-group ">
<span class="input-group-addon white">Barrel Size</span>
<select class="form-control gray" id="sizeSelect" title="Select an option">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
</div>
</div>
When a size is selected it subtracts a certain amount from the weight. So I want to make sure users don't select a size before entering a weight.
My question is how to disable the selectbox until a weight(numeric) is entered?
Something like this?
$(".weight").change(function () {
if (this.value <= 0 || this.value == null) {
$("#sizeSelect").prop("disabled", true)
}
else {
$("#sizeSelect").prop("disabled", false)
}
});
Any advice is welcome.

This Should work
//makes select disabled on load
$('#sizeSelect').attr('disabled', true);
//this function runs on input
$('#weight').on('input', function() {
let val = this.value;
if (val.length > 0) {
$('#sizeSelect').attr('disabled', false);
} else {
$('#sizeSelect').attr('disabled', true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-xs-12 col-sm-3">
<div class="input-group ">
<span class="input-group-addon white">Weight</span>
<input class="form-control weight" title="Enter the gross weight" type="text" id="weight" />
</div>
</div>
<div class="form-group col-xs-12 col-sm-3">
<div class="input-group ">
<span class="input-group-addon white">Barrel Size</span>
<select class="form-control gray" id="sizeSelect" title="Select an option">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
</div>
</div>

Yes. your idea of disabling was right. However those disable property change will act only when the change is made in text input. to make the select input disabled by default you have to add the disabled prop on document.ready() or to say, out of the .change() of text input.
jQuery(document).ready(function($){
$("#sizeSelect").prop("disabled", true);
$(".weight").change(function () {
if (this.value <= 0 || this.value == null) {
$("#sizeSelect").prop("disabled", true);
}
else {
$("#sizeSelect").prop("disabled", false);
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-xs-12 col-sm-3">
<div class="input-group " >
<span class="input-group-addon white" >Weight</span>
<input class="form-control weight" title="Enter the gross weight" type="text" id="weight" />
</div>
</div>
<div class="form-group col-xs-12 col-sm-3">
<div class="input-group ">
<span class="input-group-addon white">Barrel Size</span>
<select class="form-control gray" id="sizeSelect" title="Select an option">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
</div>
</div>

You could use keyup
$(document).ready(function(){
$("#sizeSelect").prop("disabled", true)
$(".weight").on("keyup", function() {
var length = $.trim($(this).val()).length === 0;
$("#sizeSelect").prop('disabled', length);
});
});

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>

How to Show/Hide Div on SelectedIndex in Bootstrap 3?

I have this code:
<div class="form-group">
<label for="slDisThrough" class="col-sm-1 control-label">Distributed Through</label>
<div class="col-sm-11">
<select name="slDisThrough" id="slDisThrough" class="form-control">
<option value="0">-Select-</option>
<option value="1">Agent</option>
<option value="2">Retail</option>
</select>
</div>
</div>
<div id="slAgentID" class="hide">
<div class="form-group">
<label for="slAgent" class="col-sm-1 control-label">Agent</label>
<div class="col-sm-11">
<select name="slAgent" class="form-control">
<option value="0">-Select-</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
</div>
</div>
</div>
<div id="slRetailID" class="hide">
<div class="form-group">
<label for="slRetail" class="col-sm-1 control-label">Retail</label>
<div class="col-sm-11">
<select name="slRetail" class="form-control">
<option value="0">-Select-</option>
<option value="1">Hide</option>
<option value="2">Show</option>
</select>
</div>
</div>
</div>
Check this Fiddle
if(document.getElementById("slDisThrough").selectedIndex == 1) {
document.getElementById("slAgentID").style.display = ""; }
else { document.getElementById("slAgentID").style.display = "none"; }
if(document.getElementById("slDisThrough").selectedIndex == 2) {
document.getElementById("slRetail").style.display = ""; }
else { document.getElementById("slRetail").style.display = "none"; }
I need to Show/Hide the DIVs on Selected Value, I was previously using it with JavaScript, but stuck with Bootstrap.

Since you load jQuery, better use it like this:
$('#slDisThrough').on('change', function(){
if ($(this).val() == 1 ) {
$('#slAgentID').removeClass('hide');
$('#slRetailID').addClass('hide');
}
if ($(this).val() == 2 ) {
$('#slAgentID').addClass('hide');
$('#slRetailID').removeClass('hide');
}
})
Jsfiddle here