End users are often told not to hit the submit button twice, allowing the transaction to plete; and, there are different techniques used to address this situation.

Recently though, someone asked me, "what do you do to handle the situation of a user doing a page refresh after doing a submit", the implication being that this will cause a double submit or other problem.

Can you let me know if this is a real problem that needs to be handled ... what the situation is and how to best resolve it, if at all.

End users are often told not to hit the submit button twice, allowing the transaction to plete; and, there are different techniques used to address this situation.

Recently though, someone asked me, "what do you do to handle the situation of a user doing a page refresh after doing a submit", the implication being that this will cause a double submit or other problem.

Can you let me know if this is a real problem that needs to be handled ... what the situation is and how to best resolve it, if at all.

• javascript
• html

• 5 Most browsers will warn the user if the user is refreshing a form submission. – BoltClock Commented Sep 9, 2011 at 19:17
• 1 It can cause problems of such things like double posting, duplicate uploads etc. What you can do is attach a timestamp to the initial submit, and while validating any submit process, check to see if that user has recently submitted a form, say within the last hour (3600 seconds) either by IP reference or login reference. If so ignore the new submit and display an error or redirect, whichever you prefer. If this answers your question I can give an example if needed? – no. Commented Sep 9, 2011 at 19:21
• Fantastic Joe -- I think you got the exact issue / solution. – Ray Commented Sep 9, 2011 at 19:25
• Joe, did you see beetrees solution? Thoughts? – Ray Commented Sep 9, 2011 at 19:33

6 Answers 6

The best way to resolve this is using the Post/Redirect/Get pattern.

Yes, this is a real problem unless you handle on your side. In practice on most browsers when the user hits refresh the data is resubmitted and if you on the server side do not check for this it would result in you taking the same action twice (e.g. charging a credit card twice, duplicate forum post et.c.).

The way to handle this is to check whether the user has previously done a post. For example, if you are building a forum you would send a hidden variable with a unique ID with the post. As you parse the posted data you save this unique ID into your database. If you ever encounter a post with a unique ID that has already been saved you know that you are looking at a "refresh" on the client side and you simply disregard the post.

Hope this helps!

If your users are so inclined to do a page refresh, it sounds like you have a service taking way too long to respond. Disable the submit button on submit, and show some kind of loading indicator until the response es back.

Alternatively, respond immediately on the server and queue the action for later. Linode, for example, queues server behavior, rather than running immediately on "request to resize partition". You can generalize this approach for other behavior, and even show things like progress indicators and the like with ajax.

Yes, it can be a problem (and actually is a problem in a lot of websites). But I think this is more of a server side related question than Javascript. Best practice is to use Post/Redirect/Get pattern (since you are asking specific about refresh after submit).

Yes it is a real problem but I believe this is typically handled by the browser. Chrome for instance will notify you on page refresh if there will be data posted to the server as a result, and give you the option of continuing or aborting.

EDIT:

Actually... e to think of it I did have to deal with this at work. What I ended up doing was creating a shadow box over the page untill the process was plete to

1. give visual feedback that the process was working and
2. Prevent any other user actions.

"what do you do to handle the situation of a user doing a page refresh after doing a submit"

You should redirect to the page after a form is succesfully submitted.

This would prevent that the user submits the data again and prevents that anoying alert of the browser saying the data will be submitted again.