title: Prevent form to submit if click enter
body: <p>I have this simple form</p>
  
  <pre><code>&lt;form action="http://localhost/my_project/account_control" id="generate" method="post" accept-charset="utf-8"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="personnel"&gt;Personnel Password&lt;/label&gt;
      &lt;input class="form-control panel__input-container" name="personnel" type="password" placeholder="password" value=""&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;div class="authority__button-container center-block"&gt;
        &lt;button type="button" class="btn btn-default button--dark" id="reset-save"&gt;&lt;span&gt;&lt;i class="fa fa-save"&gt;&lt;/i&gt;&lt;/span&gt; SAVE&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>My program, is using <strong>ajax</strong> to submit data in the given form attribute <code>action="http://localhost/my_project/account_control"</code>when the logged-in user clicked on the button. </p>
  
  <p>Here's the ajax.</p>
  
  <pre><code>$('#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) =&gt; { // My Message Here },
      error: function(result) { // My error message here },
      beforeSend: function() { },
      completes: function() { }
    }); // end of ajax
  
  });
  </code></pre>
  
  <p>The problem is, if the user is too fast on typing password and suddenly hit <code>enter</code> on the keyboard, the form trigger the submit and cause error on the page.</p>
  
  <p>How can I disable that?</p>