Ayushi Tomar Ayushi Tomar - 3 months ago 17
HTML Question

enable submit button only when all the condition of textboxes are satisfied

I want that my submit button should be enabled only when both the conditions are satisfied,.
right now it is more like when i enter the value in first field it enables once then when i go to next field it again get disabled then get enabled .. i want unleass and untill both the input field condition is not met it should not get enabled.



$('#accinput').on('keyup paste',username_check);
$('#Cusinput').on('keyup paste',username_check1);

function username_check(){

var username = $('#accinput').val();
setTimeout( function() {
username = $('#accinput').val();
if(username === "" || username.length < 4){
$("#btnsubmit").prop('disabled', true);
}
else{
$("#btnsubmit").prop('disabled', false);
}
},100);

}

function username_check1(){
var username = $('#Cusinput').val();
setTimeout( function() {
username = $('#Cusinput').val();
if(username === "" || username.length < 3){
$("#btnsubmit").prop('disabled', true);
}
else{
$("#btnsubmit").prop('disabled', false);
}
},100);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<input type="text" class="btn btn-info" id="accinput" required/>

<input type="text" class="btn btn-info" id="Cusinput" required>

<input type="submit" class="btn btn-info" value="Submit Button" id="btnsubmit" >




Answer Source

Here is a small code to help you. You need to have an input event on the textfields that would call the function and do the necessary condition checks. This code would work if you have dynamic elements or few more elements than the sample code provided in the question. You just have to ensure that they should have the class name form-field:

$('.form-field').on('input', checkAndEnableButton);

$(document).ready(function() {
  $("#btnsubmit").prop('disabled', true);
});

function checkAndEnableButton() {
  $("#btnsubmit").prop('disabled', true);
  var breakFlag = false;
  var enteredVal = '';
  $('.form-field').each(function() {
    enteredVal = $(this).val();
    if (enteredVal == '' || enteredVal.length < 4)
      breakFlag = true;
  });

  if (!breakFlag) {
    $("#btnsubmit").prop('disabled', false);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<input type="text" class="btn btn-info form-field" id="accinput" required/>

<input type="text" class="btn btn-info form-field" id="Cusinput" required>

<input type="submit" class="btn btn-info" value="Submit Button" id="btnsubmit">