Develop Reference

Using JS to disable options on a form

I have a form that conditionally disables select field options based on the value from a previous select field. In my example, salt is offered for sale at different weights, with weights determined by the type of salt.
My form select looks like this:
<select id="salt_type" class="form-control" name="salt_type">
<option value="null" selected disabled>Select a salt type</option>
<option value="block-salt">Block Salt</option>
<option value="tablet-salt">Tablet Salt</option>
<option value="granular-salt">Granular Salt</option>
</select>
<select id="pack_weight" class="form-control" name="pack_weight">
<option value="null" selected disabled>Select a weight</option>
<option class="hide-if-tablet-salt hide-if-granular-salt" value="8kg">8kg</option>
<option class="hide-if-block-salt" value="10kg">10kg</option>
<option class="hide-if-block-salt hide-if-granular-salt" value="25kg">25kg</option>
</select>
My JS:
$('#salt_type').bind('change', function() {
var bool = ($(this).find(':selected').val() === 'block-salt') ? true : false;
$('.hide-if-block-salt').prop('disabled', bool);
var bool2 = ($(this).find(':selected').val() === 'granular-salt') ? true : false;
$('.hide-if-granular-salt').prop('disabled', bool2);
var bool3 = ($(this).find(':selected').val() === 'tablet-salt') ? true : false;
$('.hide-if-tablet-salt').prop('disabled', bool3);
});
It works if there's only one limiting class, but if there are two, the option isn't always disabled. It doesn't even seem to be consistent in failing to disable the first, or the last class.
I tried using classList.contains:
$('#fw_salt_type').bind('change', function() {
var bool = ($(this).find(':selected').val() === 'block-salt') ? true : false;
$('.pack-weight-option').classList.contains('hide-if-block-salt').prop('disabled', bool);
});
But I get a 'classlist not defined' error. Any help appreciated.

Suggest to use non-negative class name for less confused
<option class="show-if-block-salt" value="8kg">8kg</option>
<option class="show-if-tablet-salt show-if-granular-salt" value="10kg">10kg</option>
<option class="show-if-tablet-salt" value="25kg">25kg</option>
Then on salt option change, enable only weight options with show class.
$('#salt_type').bind('change', function() {
var value = $(this).find(':selected').val();
$('#pack_weight option').each(function() {
$(this).prop('disabled', !$(this).hasClass(`show-if-${ value }`));
});
});
https://codesandbox.io/s/cranky-easley-vpcvh

drop-down validation and Combine If statement on JavaScript with extra condition for validation?

I have a function to check if the value meet the requirement, it is working fine so I have another drop-down(select) to validate with same condition but the drop-down values different I am only checking the blank selection.
Goal:
any way to improve the JS or combine them correctly.
Many thanks in advance
// for 1st drop down
function checkPrimeSelectChangeValue() {
var selObj = document.getElementById("dropdown1");
var selValue = selObj.options[selObj.selectedIndex].value;
if (selValue == "") { // if blank is selected add css for validation
$("#dropdown1").attr('disabled', 'disabled');
$("#dropdown1").addClass("text-error");
} else {
$("#btnUpdateForm").removeAttr('disabled'); // disabled button
removeError("#dropdown1"); // remover error
}
return;
}
// 2nd dropdown like below
function checkSecondSelectChangeValue() {
var selObj2 = document.getElementById("dropdown2");
var selValue2 = selObj.options[selObj.selectedIndex].value;
if (selValue2 == "") { // if blank is selected add css for validation
$("#dropdown2").attr('disabled', 'disabled');
$("#dropdown2").addClass("text-error");
} else {
$("#btnUpdateForm").removeAttr('disabled'); // disabled button
removeError("#dropdown2"); // remover error
}
return;
}
// Can I do this or Any ipmorvent can be done to this
function checkCombinedSelectChangeValue() {
var selObj = document.getElementById("dropdown1");
var selObj2 = document.getElementById("dropdown2");
var selValue = selObj.options[selObj.selectedIndex].value;
var selValue2 = selObj.options[selObj.selectedIndex].value;
if (selValue == "") { // if blank is selected add css for validation
$("#dropdown1").attr('disabled', 'disabled');
$("#dropdown1").addClass("text-error");
} else {
$("#btnUpdateForm").removeAttr('disabled'); // disabled button
removeError("#dropdown1"); // remover error
}
return;
if (selValue2 == "") { // if blank is selected add css for validation
$("#dropdown2").attr('disabled', 'disabled');
$("#dropdown2").addClass("text-error");
} else {
$("#btnUpdateForm").removeAttr('disabled'); // disabled button
removeError("#dropdown2"); // remover error
}
return;
}
<p>1st dropdown1 </p>
<select name="test" id="select">
<option value="">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="nil">nil</option>
</select>
<br>
<p>2nd dropdown1 </p>
<select name="test" id="select2">
<option value="">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="nil">nil</option>
</select>

I optimized your function a little, assuming it's supposed to run when your select changes. I also assume that you want to add the disabled property to your #btnUpdateForm since that isnt really clear with the code you provided.
First add the disabled property to your Update button like this:
<button id="btnUpdateForm" disabled>Update</button>
HTML:
<p>1st dropdown1 </p>
<select class="dropdown" name="test" id="select">
<option value="">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="nil">nil</option>
</select>
<br>
<p>2nd dropdown1 </p>
<select class="dropdown" name="test" id="select2">
<option value="">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="nil">nil</option>
</select>
JQuery:
$('.dropdown').change(function() {
var val1 = $('#select').val();
var val2 = $('#select2').val();
if (val1 == '' || val2 == '') {
$('#btnUpdateForm').prop('disabled', true);
if (val1 == '') {
$('#dropdown1').addClass('text-error');
if (val2 !== '') {
$('#dropdown2').removeClass('text-error');
}
}
else if (val2 == '') {
$('#dropdown2').addClass('text-error');
if (val1 !== '') {
$('#dropdown1').removeClass('text-error');
}
}
}
else {
$('#btnUpdateForm').prop('disabled', false);
$('#dropdown1').removeClass('text-error');
$('#dropdown2').removeClass('text-error');
}
});
Basically now the Error will show up for each Dropdown with value="" and the button will only be enabled when both Dropdown's value isn't 0.

Replacing element with a previously saved element (select boxes)

I've got some javascript to change a select box to a text box if an option is selected then change that text box back to a select box if the user hits delete/backspace to the point where they clear the text box.
http://jsfiddle.net/5e1stz46/6/
<select id='visit'>
<option value='1'>option1</option>
<option value='2'>option2</option>
<option value='3'>option3</option>
<option value='Other'>Other</option>
</select>
$('#visit').on('change', function () {
if ((this.value) == 'Other') {
tmp = this;
$(this).replaceWith($('<input/>',{'type':'text','id':'visit'}));
}
});
$(document).keyup(function(e){
if( $('#visit').length ) {
if($('#visit').is(":focus") && $("#visit").val().length == 0){
$("#visit").replaceWith(tmp);
}
}
});
$('#visit').keyup(function(e){
if(e.keyCode == 46 || e.keyCode == 8) {
alert('box now empty');
}
});
When the text box changes back into a select box, all the events it had seem to be lost.
Should I be somehow reading the event listeners when the select box comes back or should I be saving the select box differently to start with?

The events got removed because you're removing associated Html element from the DOM. You can have both select and input and play with .hide() and .show to visualize the correct element and the events will work fine.
Another approach could be to use event delegation.
Changed Html:
<div id="wrapper">
<select id='visit'>
<option value='1'>option1</option>
<option value='2'>option2</option>
<option value='3'>option3</option>
<option value='Other'>Other</option>
</select>
</div>
Changed JavaScript:
$('#wrapper').on('change', '#visit', function () {
if ((this.value) == 'Other') {
tmp = this;
$(this).replaceWith($('<input/>',{'type':'text','id':'visit'}));
}
});
[ ... ]
Rest of the code remains the same. Here is an updated JsFiddle Demo.

Once you remove the element from DOM, all its handlers are gone as well.
One solution would be to always keep the element, but just hide it from the user's view.
$('select[name=visit]').on('change', function () {
if (this.value == 'Other') {
$(this).addClass('hide');
$('input.hide').removeClass('hide');
}
});
$(document).keyup(function (e) {
var $elem = $('input[name=visit]');
if ($elem.length) {
if ($elem.is(":focus") && $elem.val().length == 0) {
$elem.addClass('hide');
$("select[name=visit]").removeClass('hide');
}
}
});
$('input[name=visit]').keyup(function (e) {
if (e.keyCode == 46 || e.keyCode == 8) {
alert('box now empty');
}
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="visit">
<option value='1'>option1</option>
<option value='2'>option2</option>
<option value='3'>option3</option>
<option value='Other'>Other</option>
</select>
<input type="text" name="visit" class="hide" />
Also as there could be only one element with the unique id I always avoid using id attribute in dynamic HTML.
Second solution
Add a parent div wrapper and attached the handler to it as shown below:
$('#wrapper').on('change', '#visit', function () {
if ((this.value) == 'Other') {
tmp = this;
$(this).replaceWith($('<input/>', {
'type': 'text',
'id': 'visit'
}));
}
});
$(document).keyup(function(e){
if( $('#visit').length ) {
if($('#visit').is(":focus") && $("#visit").val().length == 0){
$("#visit").replaceWith(tmp);
}
}
});
$('#visit').keyup(function(e){
if(e.keyCode == 46 || e.keyCode == 8) {
alert('box now empty');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="wrapper">
<select id='visit'>
<option value='1'>option1</option>
<option value='2'>option2</option>
<option value='3'>option3</option>
<option value='Other'>Other</option>
</select>
</div>
JSFIDDLE

Values of two select boxes

Briefly Explaining my program :
I Have 3 select boxes
If the value selected by the user in the 1st box is 2 & Value selected by the user in second box is 3 (option values) then the third select box should display an array.
This code doesn't work but shows an idea:
if ($('#firstbox').click(function() { ($(this).val() == '2'); } &&
$('#secondbox').click(function() { ($(this).val() == '3'); }) {
// Array Display here (not included the coding here, because there is no issue with this coding.. seems working fine)
}
I need help for the code included in if statment and && operation for checking the expression.

var select1 = $('#firstbox');
var select2 = $('#secondbox');
$([select1, select2]).change(function () {
if ( select1.val() == 2 && select2.val() == 3 ) {
// run your code here...
}
});

You need to either bind the click event to the third select box or bind to the change event of the first two boxes and callback a common function which updates the third one.

$("#firstbox, #secondbox").change(UpdateThird);
function UpdateThird() {
var a = $("#firstbox").val();
var b = $("#secondbox").val();
if (a == 2 && b == 3) {
// ...
}
}

assuming
<select id="firstbox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="secondbox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
script:
$('#secondbox, #firstbox').on('change',function(){
if($('#firstbox').val() == 2 && $('#secondbox').val() == 3)
alert('array display code here...');
})

when using javascript how do you use select form to do if else statements?

How do you take a value of an option in a select form and use it for a if else statement?
for example if apple is selected as an option then write to the document how to make applesauce but orange is selected then write how to make orange?
so far I have a basic form and select options and I know how to do the document.write but I dont know how to use a select form with if else
thanks for the help

First, make sure you have an id on your <select> allowing you to reference it from Javascript:
<select id="fruits">...</select>
Now, you can use the options and selectedIndex fields on the Javascript representation of your <select> to access the current selected value:
var fruits = document.getElementById("fruits");
var selection = fruits.options[fruits.selectedIndex].value;
if (selection == "apple") {
alert("APPLE!!!");
}

var select = document.getElementById('myList');
if (select.value === 'apple') {
/* Applesauce */
} else if (select.value === 'orange') {
/* Orange */
}

Your HTML markup
<select id="Dropdown" >
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
</select>
Your JavaScript logic
if(document.getElementById('Dropdown').options[document.getElementById('Dropdown').selectedIndex].value == "Apple") {
//write applesauce
}
else {
//everything else
}

Alternatively you can do this.
var fruitSelection = document.formName.optionName; /* if select has been given an name AND a form have been given a name */
/* or */
var fruitSelection = document.getElementById("fruitOption"); /* If <select> has been given an id */
var selectedFruit = fruitSelection.options[fruitSelection.selectedIndex].value;
if (selectedFruit == "Apple") {
document.write("This is how to make apple sauce....<br />...");
} else {
}
//HTML
<!-- For the 1st option mentioned above -->
<form name="formName">
<select name="optionName> <!-- OR -->
<select id="optionName">
<option value="Apple">Apple</option>
<option value="Pear">Pear</option>
<option value="Peach">Peach</option>
</select>
</form>