How do I stop the Back and Refresh buttons from resubmitting my form?

Question

I am doing web development. I have a page to do with credit card, which when user click "refresh" or "Back", the transaction will be performed one more time, which is unwanted. This include Browser top left "Back" & "Refresh" button, "right click->Refresh/Back", press "F5" key. This is to be done on certain cgi page only, not all of them. Can this be done using Javascript? Or any other method?

Thanks, sytee

Answer 1

The standard way is to do it in 3 steps.

1. the form page submits fields to processing page
2. processing page processes data and redirects to result page
3. result page just displays results, reloading it won't do any harm.

Answer 2

This breaks the basic browser user experience model...users should always be able to use the Refresh and Back buttons in their browser. Recommend that you fix your page another way.

If you update your question to include the language/platform/technology that you are using then someone might be able to suggest a solution.

Answer 3

vartec:s solution solves the reload-problem, not the back-problem, so here are a solution to that:

1. The form page sets a session variable, for example session("fromformpage")=1
2. The processing page check the session variable, if its ="1" then process data and redirect to result page if any other than ="1" then just redirect to result page.
3. The result page sets the session variable to "".

Then if the user is pressing back button, the processing page will not do the process again, only redirect to process page.

Answer 4

You shouldn't try to "block" these actions. What you should do is make sure that nothing happends when someone "double submits" the form.

Answer 5

The simple fact that resubmitting the form generates a duplicate transaction is worrying. You should have some sort of check to ensure each submit of form data is unique.

For example, the page which would submit the form should be given a unique ID that gets submitted with the form. The business logic should then be able to recognise that the form submitted has already been processed (as the (no longer) unique ID will be the same), so ignores the second attempt.

The 'standard way' still doesn't stop clients from clicking the back button twice... or even going back and resubmitting the form if they don't think (for whatever reason) it has been processed.

Answer 6

and in some browser you can´t even do that, and this is good!

Answer 7

The best way is to have enough session handling logic that you can recognise the 2nd (and onwards) attempt as "this is just a re-submission" and ignore it.

Answer 8

Place this code on the form page

Response.Cache.SetCacheability(HttpCacheability.NoCache);

Response.Cache.SetExpires(DateTime.Now-new TimeSpan(1,0,0));

Response.Cache.SetLastModified(DateTime.Now);

Response.Cache.SetAllowResponseInBrowserHistory(false);