title: Jquery: how to handle "stop/cancel" event when user stops form submit?
body: <p><strike>I found this question but it wasn't answered: <a href="https://stackoverflow.com/questions/14485349/is-there-a-jquery-event-that-i-can-monitor-if-form-submission-is-cancelled">Is there a jQuery event that I can monitor if form submission is cancelled?</a></p>
  
  <p>So if the user submits a form, while it's loading the user pressed "esc", or clicked "stop" button of the browser, I want to invoke a function, is it possible?</p>
  
  <p>Note: I know we can bind "esc" button, but what about if the user stopped the submission by the browser's "stop/cancel" button?</p>
  
  <p>Is there a JavaScript or jquery possible solution?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I know we can handle this issue with XHR (json/ajax) post, but I'm looking for a normal form submission.</p>
  
  <p>Simply what I'm trying to achieve is this: when the user presses the "submit" button, I want to disable the submit button. If the user cancelled/stopped the submission while it's loading, the submit button will still be disabled (should be re-enabled if submission was cancelled/stopped).</strike></p>
  
  <hr>
  
  <p><strong>Edit/Rephrase - 16th Dec 2013:</strong></p>
  
  <p>My problem is similar to this: <a href="https://stackoverflow.com/questions/14485349/is-there-a-jquery-event-that-i-can-monitor-if-form-submission-is-cancelled">Is there a jQuery event that I can monitor if form submission is cancelled?</a></p>
  
  <p>For example, I have this form:</p>
  
  <pre><code>&lt;form method="post" enctype="multipart/form-data"&gt;
      &lt;input type="file" name="imginput" value=""/&gt;
      &lt;input type="text" name="textinput" value=""/&gt;
      &lt;input type="button" id="submitbtn" value="Submit"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><em>Here's the problem scenario:</em></p>
  
  <p>A newbie user fills up the form, then double-clicks the submit button. The same form values are inserted into the server twice!</p>
  
  <p><em>Trying to Achieve:</em></p>
  
  <p>I want to disable the submit button on click with <code>$('#submitbtn').bind('click', function() { $(this).attr('disabled','disabled'); $(this).prop('disabled', true); });</code>, which solves the problem but creates another problem: if the user clicked "esc" or stopped the browser while the form is still submitting, the submit button would still be disabled and the user cannot re-submit the form any more, I want to re-enable the submit button as soon as the "submission process" is cancelled. Is there a way to achieve this? Something like: <code>$(window).onStop(function() { ... });</code> ? or a way to indicate that the submission process has been interrupted (or still running)?</p>
  
  <p><em>Notes:</em></p>
  
  <ul>
  <li>Looking for client-side (javascript or jquery) solution. I know it can be solved easily with server-side checking for identical entries, but I'm not interested in server-side solution.</li>
  <li>Problem can be solved with XHR (ajax/json) bindings (like onSuccess, onFailure, etc).. but in this case, I'm using a normal post, not XHR, so please exclude XHR from your answer.</li>
  <li>Solution has to solve the problem <em>at least</em> for the 5 major browsers (IE, FF, Chrome, Safari, Opera).</li>
  <li>Someone may suggest that we bind "keypress" for the "esc" button, so when the user press "esc" we re-enable the submit button. That's good, but that's half-solution. What if the user stopped the "submission process" by the stop button of the browser, is there a way to indicate that this stop button has been clicked?</li>
  </ul>