I have the following html and the javascript

<div  id="otp">
    <div >
        <div >
            <input minlength="1" maxlength="1" name="OTPcode" autocomplete="off"  pattern="[0-9] " type="number" id="code1" onkeyup="onkeyUpEvent(1,event)">             
        </div>
        <div >
            <input minlength="1" maxlength="1" name="OTPcode" autocomplete="off"  pattern="[0-9] " type="number" id="code2" onkeyup="onkeyUpEvent(1,event)">             
        </div>
        <div >
            <input minlength="1" maxlength="1" name="OTPcode" autocomplete="off"  pattern="[0-9] " type="number" id="code3" onkeyup="onkeyUpEvent(1,event)">             
        </div>
        <div >
            <input minlength="1" maxlength="1" name="OTPcode" autocomplete="off"  pattern="[0-9] " type="number" id="code4" onkeyup="onkeyUpEvent(1,event)">             
        </div>
    </div>
</div>
<div id="divButtons"  data-kaction="submitDiv" style="display:block">
    <input type="button" name="btnOTP" id="btnOTP" value="submit" >
</div>

And I have written the following javascript to enable the submit button when all the OTP fields are entered . But the submit button is still disabled. I am trying to figure out the solution and learn in the process.

$(document).ready(function() {
  var filled = true;
  $('.otp').change(function() {
    $('#otp input[type=number]').each(function() {
      if($(this.val() == '') {
        filled = false;
       }
    });
    return filled;
    
    if (filled) {
      $('#btnOTP').removeClass('disabled');
    } else {
      $('#btnOTP').addClass('disabled');
    }
  })
});

CodePudding user response：

be careful when using return it will exit function, i also changed event call because .change is deprecated

  $('.otp').on('change', function () {
    let filled = true
    
    $('#otp input[type=number]').each(function () {
      if ($(this.val() == '') )
        filled = false;
      
    });

    if (filled) {
      $('#btnOTP').removeClass('disabled');
    } else {
      $('#btnOTP').addClass('disabled');
    }

})

CodePudding user response：

Few corrections:

1. Fix typo in if
2. Remove early return
3. Early exit if empty is met

$(document).ready(function() {
    var filled = true;

    $('.otp').change(function() {
        $('#otp input[type=number]').each(function() {
            if ($(this.val() == '')) {
                filled = false;
                return false;
            }
        });

        if (filled) {
            $('#btnOTP').removeClass('disabled');
        } else {
            $('#btnOTP').addClass('disabled');
        }
    })
});