CODEWITHSUNDEEP
jqueryformsvalidationevent-handlingjquery-events
JLR
JLR

Reputation: 733

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

Upvotes: 1

Views: 186

Answers (1)

kukkuz
kukkuz

Reputation: 42352

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>

Upvotes: 1

Related Questions