erkind dunya
erkind dunya

Reputation: 43

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>

Upvotes: 0

Views: 804

Answers (1)

Matt.S
Matt.S

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

Related Questions