Reputation: 43
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>
Upvotes: 0
Views: 804
Reputation: 287
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.
Upvotes: 1