JQuery: how to handle the stop / cancel event when the user stops?

Question

I found this question, but they did not answer it: Is there a jQuery event that I can control if the form cancellation is canceled?

So, if the user submits the form, and when the user loads, "esc" is pressed or the "stop" button of the browser is pressed, I want to call the function, is this possible?

Note. I know that we can bind the esc button, but what about the user stopping the browser from sending the stop / cancel button?

Is JavaScript or jquery solution possible?

EDIT:

I know that we can handle this problem with XHR (json / ajax), but I am looking for the usual form submission.

Just what I'm trying to achieve is this: when the user clicks the submit button, I want to disable the submit button. If the user canceled / paused the feed during the download, the submit button will still be disabled (should be turned back on if sending was canceled / stopped).

---

Change / rephrase - December 16, 2013:

My problem is similar to this: Is there a jQuery event that I can control if the form submission is canceled?

For example, I have this form:

<form method="post" enctype="multipart/form-data"> <input type="file" name="imginput" value=""/> <input type="text" name="textinput" value=""/> <input type="button" id="submitbtn" value="Submit"/> </form> 

Here is the problem scenario:

A new user fills out a form, then double-clicks the submit button. The same form values ​​are inserted into the server twice!

Attempt to achieve:

I want to disable the submit button when I click $('#submitbtn').bind('click', function() { $(this).attr('disabled','disabled'); $(this).prop('disabled', true); }); , which solves the problem, but creates another problem: if the user pressed "esc" or stopped the browser while the form is still submitted, the "Submit" button will still be disabled and the user cannot resend the form anymore, I want to enable the submit button again as soon as the "sending process" is canceled. Is there any way to achieve this? Something like: $(window).onStop(function() { ... }); ? or a way to indicate that the feed has been interrupted (or is still running)?

Notes:

• Looking for a client-side solution (javascript or jquery). I know that it can be easily solved by checking on the server side for identical records, but I'm not interested in the server solution.
• The problem can be solved with XHR bindings (ajax / json) (e.g. onSuccess, onFailure, etc.) .. but in this case I use a regular post, not XHR, so please exclude XHR from your answer.
• The solution should solve the problem for at least 5 major browsers (IE, FF, Chrome, Safari, Opera).
• Some might suggest that we bind "keypress" to the "esc" button, so when the user presses "esc", we turn on the submit button again. This is good, but it is a half-solution. What if the user stopped the “send process” with the browser stop button, is there a way to indicate that this stop button is pressed?

Answer 1

Finally, this issue actually destroys the complex problem and therefore can be considered in parts, as it should be. First, let me take the elephant out of the room:

• there is no cross browser that detects when the user presses the stop button / (ref)

I really searched for this for a while and could not find how to do it, but maybe someone can give an answer to this question and enlighten both of us. Now let me take the second elephant out of the room.

• Ajax requests are allowed (for some reason). After the user clicked the submit button and the actual send event will fire, we STUCK

It is a fact that we can do something while some request is being processed, is called the so-called asynchronous (for example, the first "A" in "Ajax"). Look at the third elephant

• I have dumb / inexperienced / clickety-clackety / intruders who might accidentally create inconsistencies on the server (i.e.: unwanted duplicates). We must provide a mechanism to prevent such an event.

Switch buttons are, of course, the easiest solution to this dilemma. We fix submit, put a line to disable further sending events from this form. Done. Can the next elephant enter?

• The process has begun, the user sees that the progress indicator is spinning and realizes that it is simply corrupted. He wants to stop it, HEL! he needs to stop him.

The problem is , the user does not know (and he is sure that hell does not need to know) if the server already has full headers and is processing the request. The server can listen to see if the client was interrupted, but ...

• User pressed the stop button! did the server process the request? did the server reset it? my data got into the database? oh, now I have a wheelchair form that I can no longer use, and I don’t know if there were consequences of what I had. How about an update?

Now your problem has a bunch of big holes in it, which are compounded by the fact that YOU DO NOT want your requests to be ASYNCHRONOUS, and there is no way to reliably listen to browser.onStop .

My answer

Think of it differently.

• You are afraid of inconsistencies. Solution: disable event dispatch after the first

• Your users are dumb / inexperienced. Solution: a big red label Warning: do not press the stop button during the process, or navigate away from the page until the request has completed .

• Your users are worried. Solution: add the clause You may edit your post/info in another page once the request has completed. (some instructions to find the edit page) You may edit your post/info in another page once the request has completed. (some instructions to find the edit page)

• Your server (or slow connection) takes too much time, and the user may be impatient. Solution: set a timeout event before running the view, which will be ... but wait! . The request is synchronous , which means that nothing can be done before it is completed. Dear User: this process may take a while. If after X mins you have not been redirected to this/page.html please... (do something/more instructions)

• Take all of these tips and start using Ajax if you want to increase interactivity, educate your users about the dangers of trying to break requests and let them edit later.

• Follow the examples of other services. Many companies are very warning about payment procedures in order to be patient until the process is completed , and add some instructions if something goes wrong and the user is worried.

• Consider adding restrictions on interactivity, some processes simply do not have to be interactive (payments, unique entries ...)

• If you are worried that the user will leave himself in a quandary, add some information to him. If you tried to stop the procedure please follow this link to see if it was processed, if it wasn't you will be redirected to this form again (you may want to save the users form data so he doesn't have to start over)

Answer 2

Internet Explorer has a document.onstop event that fires, but other browsers do not seem to support this. Note that it starts when the user clicks the Stop button or presses Esc, or if the user goes to another page while the page is loading, which has the same effect.

I do not believe that there is a reliable way to trigger an event when you click the Stop button in other browsers. Perhaps it would be possible to do something like: keeping the connection to the server open (as in the Comet approach), streaming some keep-alive down the connection and detecting the end of the stream (as I assume if Stop were pressed).

From: Any javascript event that occurs when a user clicks the Stop Download button?

Answer 3

I based my answer on hanzo2001 comments in my question:

"The whole idea does not allow the user to click the submit button more than once, so the user does not submit the same form twice or more."

Then you can have the wasNeverSubmitted flag and set it to true after submitting the first form.

Finally, you should check this flag for each submit form, if true, then you will cancel the form submission, see how to do this on this issue Disable function submission for all forms on the HTML page

---

The code will look something like this:

HTML:

 <form class="js-form-submit-once"> /* .. form elements here*/ </form> 

Javascript (jQuery required):

 var wasNeverSubmitted = true; $('js-form-submit-once').on('click', function(){ if( wasNeverSubmitted ){ wasNeverSubmitted = false; /* ... do nothing, let it submit */ } else { return false; /* cancels form submission */ } });