I have the following html and the javascript
<div class="SMS" id="otp">
<div class="SMS-wrapper">
<div class="SMSItem otp">
<input minlength="1" maxlength="1" name="OTPcode" autocomplete="off" class="SMS_Input" pattern="[0-9]+" type="number" id="code1" onkeyup="onkeyUpEvent(1,event)">
</div>
<div class="SMSItem otp">
<input minlength="1" maxlength="1" name="OTPcode" autocomplete="off" class="SMS_Input" pattern="[0-9]+" type="number" id="code2" onkeyup="onkeyUpEvent(1,event)">
</div>
<div class="SMSItem otp">
<input minlength="1" maxlength="1" name="OTPcode" autocomplete="off" class="SMS_Input" pattern="[0-9]+" type="number" id="code3" onkeyup="onkeyUpEvent(1,event)">
</div>
<div class="SMSItem otp">
<input minlength="1" maxlength="1" name="OTPcode" autocomplete="off" class="SMS_Input" pattern="[0-9]+" type="number" id="code4" onkeyup="onkeyUpEvent(1,event)">
</div>
</div>
</div>
<div id="divButtons" class="buttonContainer" data-kaction="submitDiv" style="display:block">
<input type="button" name="btnOTP" id="btnOTP" value="submit" class="btn-primary submitbutton disabled">
</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');
}
})
});
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');
}
})
Few corrections:
$(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');
}
})
});