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

Question

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

74k Views Asked by AudioBubble At 11 April 2025 at 11:12

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?

Original Q&A

There are 13 best solutions below

**Ramesh Rajendran** · Answer 1

Just put this javascript on the html section of aspx page above head section

<script type = "text/javascript" >
function disableBackButton()
{
window.history.forward();
}
setTimeout("disableBackButton()", 0);
</script>

We need to put it on the html section of the page which we want to prevent user to visit by hitting the back button

Complete code of the page looks like this

<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type = "text/javascript" >
function disableBackButton()
{
window.history.forward();
}
setTimeout("disableBackButton()", 0);
</script>
</head>
<body onload="disableBackButton()">
<form id="form1" runat="server">
<div>
This is First page <br />
<br />
Go to Second page
<br />
<br />
<asp:LinkButton ID="LinkButton1" runat="server"
PostBackUrl="~/Default2.aspx">Go to Second Page
</asp:LinkButton></div>
</form>
</body>
</html>

If you are using firefox then use instead of onload

If you want to disable back button using code behind of aspx page,than you need to write below mentioned code C# code behind

protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
string strDisAbleBackButton;
strDisAbleBackButton = "<script language="javascript">\n";
strDisAbleBackButton += "window.history.forward(1);\n";
strDisAbleBackButton += "\n</script>";
ClientScript.RegisterClientScriptBlock(this.Page.GetType(), "clientScript", strDisAbleBackButton);
}

We can also achieve this by disabling browser caching or cache by writing this line of code either in Page_load event or in Page_Init event

protected void Page_Init(object Sender, EventArgs e)
{
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetExpires(DateTime.Now.AddSeconds(-1));
Response.Cache.SetNoStore();
}

Doing this,user will get the page has expired message when hitting back button of browser

Demo is :

enter image description here

**Anonymous** · Answer 2

Anonymous On 08 August 2012 at 12:47

generate a random string and store it in session,
then output it to your form as a hidden value,
check the submitted and store variable, if matches process your request,
go to 1.

**Malcolm Cooper** · Answer 3

I didn't see this here so here it is.

Put a unique token in the form.
The submit button triggers an xmlhttp(ajax) request to the server to create a session variable named after the token with a stored value of 1.
The ajax request submits the form after receiving a positive state change.
The form processing script checks for the session variable withe the stored value of 1.
The script removes the session variable and processes the form.

If the session variable is not found, the form will not be processed. Since the variable is removed as soon as its found, the form can only be run by pressing the submit button. Refresh and back will not submit the form. This will work without the use of a redirect.

**Bhavin Patel** · Answer 4

This code works for not back from current page me..

Here I put a code which helps you , not open contextmenu and on browser reload ask you leave a page or not...

I am trying the ask click on browser back button

jQuery( document ).ready(function() {

    document.onkeydown = fkey;
    document.onkeypress = fkey
    document.onkeyup = fkey;

    var wasPressed = false;

    function fkey(e){
        e = e || window.event;
        //alert(e.keyCode);
        if( wasPressed ) return; 


        if (e.keyCode == 116 || e.keyCode == 8 || e.keyCode == 17) {
                     // alert("f5 pressed");
                      window.onbeforeunload = null;
                      return true;
                 }

    }
window.onbeforeunload = function (event) {
    var message = ''; // Type message here

    if (typeof event == 'undefined') {
        event = window.event;
    }
    if (event) {
        event.returnValue = message;
    }

    return message;
};

jQuery(function () {

    jQuery("a").click(function () {
        window.onbeforeunload = null;
    });

    jQuery(".btn").click(function () {
        window.onbeforeunload = null;
    });

    //Disable part of page
    $(document).on("contextmenu",function(e){
        return false;
    });
});});

Thanks,

**vartec** · Answer 5

The standard way is to do it in 3 steps.

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

**Richard Ev** · Answer 6

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 server language/platform/technology that you are using then someone might be able to suggest a solution.

**Stefan** · Answer 7

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

The form page sets a session variable, for example session("fromformpage")=1
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.
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.

**andi** · Answer 8

andi On 20 March 2009 at 09:18

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

**James Camfield** · Answer 9

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.

**Tobias** · Answer 10

Tobias On 20 March 2009 at 09:20

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

**Vatine** · Answer 11

Vatine On 20 March 2009 at 09:21

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.

**wired00** · Answer 12

I found the above Post/Redirect/Get explanations a little ambiguous

Here's what I followed and hopefully it helps someone in the future

http://wordsideasandthings.blogspot.ca/2013/04/post-redirect-get-pattern-in-php.html

Essentially the process based on the above solution is:

Submit from the FORM page to the processing page (or to itself)
Handle database or payment processing etc
If required, store user feedback message in a session variable, possible error messages etc
Perform header redirect to results page (or to original form page). If required, display custom message from processing page. Such as "Error Credit Card payment was rejected", and reset session variables.

Redirect with something like:

header("HTTP/1.1 303 See Other");
header("Location: http://$_SERVER[HTTP_HOST]/yourfilehere.php");
die();

The header redirect will initiate a GET request on "yourfilehere.php", because a redirect is simply that, a "request" to fetch data FROM the server, NOT a POST which submits data TO the server. Thus, the redirect/GET prevents any further DB/payments processing occurring after a refresh. The 301 error status will help with back button pressing.

Helpful Reading:

**AudioBubble** · Answer 13

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);

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

There are 13 best solutions below

Related Questions in JAVASCRIPT

Related Questions in BROWSER

Related Questions in DOUBLE-SUBMIT-PREVENTION

Trending Questions

Popular # Hahtags

Popular Questions