How to stop re submitting a form after clicking back button [duplicate]

雨燕双飞 提交于 2019-12-06 15:42:17

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>

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.

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.

gevorg

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!