CODEWITHSUNDEEP
jquery
Alexu
Alexu

Reputation: 243

Submit button not getting enabled after meeting condition

I am trying to validate the form and used jquery to disable the button if the number is less than 8 and enable it if it is equal to 8. it disabled successfully but doesn't get enabled.

$(document).ready(function() {
  $("#user_phone").keydown(function(e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
      // Allow: Ctrl+A, Command+A
      (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
      // Allow: home, end, left, right, down, up
      (e.keyCode >= 35 && e.keyCode <= 40)) {
      // let it happen, don't do anything
      return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
      e.preventDefault();
    }

    var number = $(this).val();
    if (number < 8) {
      $('#submit').prop('disabled', true);
    } else if (number == 8) {
      $('#submit').removeAttr('disabled');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container" id="main-container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-md-offset-4">
      <h1 class="text-center login-title"></h1>
      <div class="account-wall">
        <img class="profile-img" src="../../../../../uploads/almakan/AlMakan-Cafe-Logo.jpg" alt="">
        <form class="form-signin">
          <input type="text" class="form-control" placeholder="Full name" name="user_name" id="user_name" required autofocus>
          <input maxlength="8" type="text" class="form-control" placeholder="Mobile eg 99999999" name="user_phone" id="user_phone" required>
          <input type="submit" id="submit" value="Enter" class="btn btn-lg btn-primary btn-block" />
          <a href="#" class="pull-right need-help">Need help? </a><span class="clearfix"></span>
        </form>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 17

Answers (2)

webbm
webbm

Reputation: 653

The value for var number = $(this).val(); hasn't changed yet because you are looking at it on keydown. Change it to keyup: https://jsfiddle.net/webbm/a8ppy8qm/

Upvotes: 0

Ali Rasheed
Ali Rasheed

Reputation: 2815

You have to count the length of the string. Check

$(document).ready(function() {
  $("#user_phone").keydown(function(e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
      // Allow: Ctrl+A, Command+A
      (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
      // Allow: home, end, left, right, down, up
      (e.keyCode >= 35 && e.keyCode <= 40)) {
      // let it happen, don't do anything
      return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
      e.preventDefault();
    }

    var number = $(this).val();
    if (number.length < 8) {
      $('#submit').prop('disabled', true);
    } else if (number.length == 8) {
      $('#submit').removeAttr('disabled');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container" id="main-container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-md-offset-4">
      <h1 class="text-center login-title"></h1>
      <div class="account-wall">
        <img class="profile-img" src="../../../../../uploads/almakan/AlMakan-Cafe-Logo.jpg" alt="">
        <form class="form-signin">
          <input type="text" class="form-control" placeholder="Full name" name="user_name" id="user_name" required autofocus>
          <input maxlength="8" type="text" class="form-control" placeholder="Mobile eg 99999999" name="user_phone" id="user_phone" required>
          <input type="submit" id="submit" value="Enter" class="btn btn-lg btn-primary btn-block" />
          <a href="#" class="pull-right need-help">Need help? </a><span class="clearfix"></span>
        </form>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions