Preventing form resubmission

Question

2 pages. Page one contains an HTML form. Page two - the code that handles the form's data.

The form in page one is submitted and the browser is redirected to page two. Page two handles the data. Now if page two is refreshed an alert titled "Confirm Form Resubmission" pops up.

How do I prevent that?

Answer 1

Directly, you can't, and that's a good thing. The browser's alert is there for a reason. This thread should answer your question:

http://stackoverflow.com/questions/660329/prevent-back-button-from-showing-post-confirmation-alert

Two key workarounds suggested were the PRG pattern, and an AJAX submit followed by a scripting relocation.

Note that if your method allows for a GET and not a POST submission method, then that would both solve the problem and better fit with convention. Those solutions are provided on the assumption you want/need to POST data.

Answer 2

If you refresh a page with POST data, the browser will confirm your resubmission. If you use GET data, the message will not be displayed. You could also have the second page, after saving the submission, redirect to a third page with no data.

Answer 3

There are 2 approaches people used to take here:

Method 1: Use AJAX + Redirect

This way you post your form in the background using JQuery or something similar to Page2, while the user still sees page1 displayed. Upon successful posting, you redirect the browser to Page2.

Method 2: Post + Redirect to self

This is a common technique on forums. Form on Page1 posts the data to Page2, Page2 processes the data and does what needs to be done, and then it does a HTTP redirect on itself. This way the last "action" the browser remembers is a simple GET on page2, so the form is not being resubmitted upon F5.

Answer 4

The only way to be 100% sure the same form never gets submitted twice is to embed a unique identifier in each one you issue and track which ones have been submitted at the server. The pitfall there is that if the user backs up to the page where the form was and enters new data, the same form won't work.

Answer 5

There are two parts to the answer:

1. Ensure duplicate posts don't mess with your data on the server side. To do this, embed a unique identifier in the post so that you can reject subsequent requests server side. This pattern is called Idempotent Receiver in messaging terms.

2. Ensure the user isn't bothered by the possibility of duplicate submits by both

   • redirecting to a GET after the POST (POST redirect GET pattern)
   • disabling the button using javascript

Nothing you do under 2. will totally prevent duplicate submits. People can click very fast and hackers can post anyway. You always need 1. if you want to be absolutely sure there are no duplicates.