1

I have this simple form

<form action="http://localhost/my_project/account_control" id="generate" method="post" accept-charset="utf-8">
  <div class="form-group">
    <label for="personnel">Personnel Password</label>
    <input class="form-control panel__input-container" name="personnel" type="password" placeholder="password" value="">
  </div>
  <div class="form-group">
    <div class="authority__button-container center-block">
      <button type="button" class="btn btn-default button--dark" id="reset-save"><span><i class="fa fa-save"></i></span> SAVE</button>
    </div>
  </div>
</form>

My program, is using ajax to submit data in the given form attribute action="http://localhost/my_project/account_control"when the logged-in user clicked on the button.

Here's the ajax.

$('#reset-save').click(function() {
  url     = $(this).parents('form').attr('action') + '/reset_user_password';
  form_id = $(this).parents('form').attr('id');

  $.ajax({
    type: "POST",
    url: url,
    data: $('#'+form_id).serialize(),
    dataType: 'JSON',
    success:(result) => { // My Message Here },
    error: function(result) { // My error message here },
    beforeSend: function() { },
    completes: function() { }
  }); // end of ajax

});

The problem is, if the user is too fast on typing password and suddenly hit enter on the keyboard, the form trigger the submit and cause error on the page.

How can I disable that?

Fil
  • 8,225
  • 14
  • 59
  • 85
  • If you're just looking to stop the submit, try passing 'e' through your function and using e.preventDefault(); That should prevent the default events of the click (which include the submit). – DawnPatrol Jan 28 '17 at 06:57

1 Answers1

3

You can prevent enter key event. So form will not submit directly and user need to press save button to submit form.

$(document).keypress(function(e) {
    if(e.which == 13) {
        e.preventDefault();
    }
});
Bharatsing Parmar
  • 2,435
  • 1
  • 9
  • 18