How to stop re submitting a form after clicking back button

Question

I have a JSP page with a form where you fill up certain details. On submitting the form i call a servlet which then updates details in a database after that i redirect to a page i display a confirmation message to the user.

The problem i have here is when the user clicks back he goes to the form page again where if he clicks a submit button, it creates a new record in the database.

Consider this similar to a shopping cart example where in this case he would buy the same item twice. But the only problem here is i cannot handle this in backend, i.e. the database can never know a redundant operation is taking place. I need to handle this from the client side.Bit weird but i have to do it this way.

Basically when the user clicks the back button i don't want him to be able to go to the form page and may be just to some other page.

Solution 1

This is a typical HTML form issue, you can solve it through any one of following methods

1) Server side (page expiration): Since you've mentioned that the page refreshes and goes to the confirmation. You can set no-cache and add a page expiration time as -1 to the page you have that form. So that when user presses the back button, he will see that the page has expired. He will be forced to load the page freshly. This is the behavior that I see in most banking websites.

Response.Buffer = True
Response.ExpiresAbsolute = Now() - 1
Response.Expires = 0
Response.CacheControl = "no-cache"

2) Using turn Key method: When the form loads, you can generate a random key in session memory and also embed it as a hidden value in the page. During form submission, check the submitted hidden key against the value in session. If exists, then add the entry to database otherwise you can reload the page with a fresh key for the user (who might have done that unintentionally).

In load balanced or web farms, consider persisting the turn key in Database against the current user.

3) Client Side (Not recommended) : You can restrict the user from using the browser back button by removing the page from the history. (One side effect is that it will remove the entire history for that browser tab/window)

history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.title);
});

If you need the same support for older browsers where push and pop states are not supported, you can use following snippet.

<script>
  function preventBack() {
    window.history.forward();
  }
  setTimeout("preventBack()", 0);
  window.onunload = function() {
    null
  };
</script>

Solution 2

Before redirecting to the JSP page send these headers with the response from the controller so that the page is not stored in cache and the browser will always request a new page from the server.

response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
response.setDateHeader("Expires", 0);

So every time you go back to that page a new page will be requested from the server and will be displayed with the cleared input fields.

Solution 3

You could implement a PRG-Pattern (https://en.wikipedia.org/wiki/Post/Redirect/Get) using php.

Basically, after successfully submitting the form you redirect to a confirmation page which informs the user that their submission was successful/accepted/etc. and also set a variable which you can later use to check if said submission has been submitted yet.

When the user tries to reload said page or go back you can check the variable and display either the form again or the confirmation page based on if the submission has been submitted already.

Solution 4

I think following flow is the best:

• Client submits data to server
• Servlet processes it
• It returns HTTP 303 redirect to client
• Client redirects to success page

After this flow, refresh, back button will work properly.

For more information read Simple Post-Redirect-Get code example

View more solutions

Comments

[Si8]

Will this work for PHP/WordPress?

[Kaustav]

Yes, you can set the same response headers from PHP as well and it would work like this only. But the syntax is different in PHP.

[Si8]

Thank you for your response. I will modify it for PHP/