Johan Ndiyo Linnarsson Johan Ndiyo Linnarsson - 1 month ago 17
jQuery Question

Dynamically remove disabled-value from submit button when an input field have values

I have this form that works. I can't click on submit-button unless 16 digit numbers is entered in the

input
field. The issue is that it's only possible to click on submit when I click outside of the input field.

I would like that when the user enters the last digit number, "disabled" will automatically be removed without the need of clicking outside the input field first. How can I achieve this?

<form enctype="multipart/form-data" name="verify" method="post" action="https://something.com">
<div class="form">
<input id="inputNumber" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="16" name="number" value="Fyll in number" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" />
<div class="notice"><span></span></div>
</div>
<input type="submit" value="ORDER" class="button" />
</div>
</form>
<script>
var $j = jQuery.noConflict();

$j(function(){

$j(document).ready(function (){
validate();
$j('#inputNumber').change(validate);
$j('.notice span').text('');
});

function validate(){
if ($j('#inputNumber').val().length == 16) {
$j("input[type=submit]").prop("disabled", false);
$j("input[type=submit]").addClass("disabled-off");
$j("input[type=submit]").removeClass("disabled-on disabled-colour");
$j('.notice span').text('');
}
else {
$j("input[type=submit]").prop("disabled", true);
$j("input[type=submit]").addClass("disabled-on disabled-colour");
$j("input[type=submit]").removeClass("disabled-off");
$j('.notice span').text('More numbers is needed');
}
}
});
</script>


Regards Johan

Answer Source

Instead on change listener you can use input listener:

$j('#inputNumber').on('input', validate);

(and note that you have an extra closing </div>) See demo below:

var $j = jQuery.noConflict();

$j(function() {

  $j(document).ready(function() {
    validate();
    $j('#inputNumber').on('input', validate);
    $j('.notice span').text('');
  });

  function validate() {
    if ($j('#inputNumber').val().length == 16) {
      $j("input[type=submit]").prop("disabled", false);
      $j("input[type=submit]").addClass("disabled-off");
      $j("input[type=submit]").removeClass("disabled-on disabled-colour");
      $j('.notice span').text('');
    } else {
      $j("input[type=submit]").prop("disabled", true);
      $j("input[type=submit]").addClass("disabled-on disabled-colour");
      $j("input[type=submit]").removeClass("disabled-off");
      $j('.notice span').text('More numbers is needed');
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" name="verify" method="post" action="https://something.com">
  <div class="form">
    <input id="inputNumber" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="16" name="number" value="Fyll in number" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;"
    />
    <div class="notice"><span></span></div>
  <!--</div>-->
  <input type="submit" value="ORDER" class="button"/>
  </div>
</form>