I designed a password pin page that resembles a POS NUMPAD for users to enter their password.
I am struggling to make the condition specified in the JavaScript function properly.
Rule: Hide the submit button if the minimum input is less than 4 characters.
The functionality doesn't work when using the numpad to enter numbers, but it works fine without the numpad.
Could someone please assist me in fixing this issue?
$(document).ready(function() {
$('button[type="submit"]').attr('disabled', true);
$('input').on('keyup',function()
{
var input_val = $("#cc-pin").val();
var minLength = $("#cc-pin").attr( 'minlength' );
if(input_val != '' && input_val.length >= minLength)
{
$('button[type="submit"]').attr('disabled' , false);
}
else
{
$('button[type="submit"]').attr('disabled' , true);
}
});
});
function addNumber(element){
document.getElementById('cc-pin').value = document.getElementById('cc-pin').value+element.value;
}input[type=text] {
width: 100%;
padding: 12px 20px;
border: 2px solid red;
border-radius: 4px;
}
element.style {
text-align: center;
color: red;
}
.fbutton {
background-color: #655F5F; /* #4CAF50 */
border: 2px solid #000;
border-radius: 12px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="" accept-charset="UTF-8" id="creditCard">
<div class="pinalert">
<input id="cc-pin" style="text-align: center; color: red;" class="validate mbs date" name="cc-pin" type="password" maxlength="6" minlength="4" value="" data-mask="######" required>
<label for="cc-pin"> </label><br /><br />
<input id="cc-pin" type="button" class="fbutton" name="1" value="1" id="1" onClick=addNumber(this); />
<input id="cc-pin" type="button" class="fbutton" name="2" value="2" id="2" onClick=addNumber(this); />
<input id="cc-pin" type="button" class="fbutton" name="3" value="3" id="3" onClick=addNumber(this); /> <br /><br>
<input id="cc-pin" type="button" class="fbutton" name="4" value="4" id="4" onClick=addNumber(this); />
<input id="cc-pin" type="button" class="fbutton" name="5" value="5" id="5" onClick=addNumber(this); />
<input id="cc-pin" type="button" class="fbutton" name="6" value="6" id="6" onClick=addNumber(this); /> <br /><br>
<input id="cc-pin" type="button" class="fbutton" name="7" value="7" id="7" onClick=addNumber(this); />
<input id="cc-pin" type="button" class="fbutton" name="8" value="8" id="8" onClick=addNumber(this); />
<input id="cc-pin" type="button" class="fbutton" name="9" value="9" id="9" onClick=addNumber(this); /> <br /><br>
<input id="cc-pin" type="button" class="fbutton" name="0" value="0" id="0" onClick=addNumber(this); />
</div>;
<button type="submit" class="btn btn-medium wide-sm center"></button>
</div>;
</form>}