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

Question

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>

Please note: id are wrong on HTML it should be "dropdown1" and "dropdown2" — erkind dunya
– erkind dunya, Commented Jan 21, 2019 at 13:32
On you combined function the var selValue and var selValue2 are the same — Matt.S
– Matt.S, Commented Jan 21, 2019 at 13:42

Matt.S · Accepted Answer · 2019-01-21 14:51:32Z

1

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.

answered Jan 21, 2019 at 14:51

Matt.S

2874 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

erkind dunya Over a year ago

thanks Matt, I will test it logically it looks much better than mine.

Matt.S Over a year ago

No problem. You might have to change some things around, because it wasn't clear when you want to display the errors (or where the Errors are). In the end i chose the behaviour i thought was best for this case.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related