Advertisement
Advertisement


How to prevent form resubmission when page is refreshed (F5 / CTRL+R)


Question

I have a simple form that submits text to my SQL table. The problem is that after the user submits the text, they can refresh the page and the data gets submitted again without filling the form again. I could redirect the user to another page after the text is submitted, but I want users to stay on the same page.

I remember reading something about giving each user a unique session id and comparing it with another value which solved the problem I am having but I forgot where it is.

2017/11/12
1
136
11/12/2017 11:25:15 AM

Accepted Answer

Use the Post/Redirect/Get pattern. http://en.wikipedia.org/wiki/Post/Redirect/Get

With my website, I will store a message in a cookie or session, redirect after the post, read the cookie/session, and then clear the value of that session or cookie variable.

2017/07/24
97
7/24/2017 4:58:07 AM


You should really use a Post Redirect Get pattern for handling this but if you've somehow ended up in a position where PRG isn't viable (e.g. the form itself is in an include, preventing redirects) you can hash some of the request parameters to make a string based on the content and then check that you haven't sent it already.

//create digest of the form submission:

    $messageIdent = md5($_POST['name'] . $_POST['email'] . $_POST['phone'] . $_POST['comment']);

//and check it against the stored value:

    $sessionMessageIdent = isset($_SESSION['messageIdent'])?$_SESSION['messageIdent']:'';

    if($messageIdent!=$sessionMessageIdent){//if its different:          
        //save the session var:
            $_SESSION['messageIdent'] = $messageIdent;
        //and...
            do_your_thang();
    } else {
        //you've sent this already!
    }
2016/04/29

You can prevent form resubmission via a session variable.

First you have to set rand() in a textbox and $_SESSION['rand'] on the form page:

<form action="" method="post">
  <?php
   $rand=rand();
   $_SESSION['rand']=$rand;
  ?>
 <input type="hidden" value="<?php echo $rand; ?>" name="randcheck" />
   Your Form's Other Field 
 <input type="submit" name="submitbtn" value="submit" />
</form>

After that check $_SESSION['rand'] with textbox $_POST['randcheck'] value like this:

if(isset($_POST['submitbtn']) && $_POST['randcheck']==$_SESSION['rand'])
{
    // Your code here
}
2019/10/22

I use this javascript line to block the pop up asking for form resubmission on refresh once the form is submitted.

if ( window.history.replaceState ) {
  window.history.replaceState( null, null, window.location.href );
}

Just place this line at the footer of your file and see the magic

2018/09/23

When the form is processed, you redirect to another page:

... process complete....
header('Location: thankyou.php');

you can also redirect to the same page.

if you are doing something like comments and you want the user to stay on the same page, you can use Ajax to handle the form submission

2011/06/12

I found next workaround. You may escape the redirection after processing POST request by manipulating history object.

So you have the HTML form:

<form method=POST action='/process.php'>
 <input type=submit value=OK>
</form>

When you process this form on your server you instead of redirecting user to /the/result/page by setting up the Location header like this:

$cat process.php
<?php 
     process POST data here
     ... 
     header('Location: /the/result/page');
     exit();
?>

enter image description here

After processing POSTed data you render small <script> and the result /the/result/page

<?php 
     process POST data here
     render the <script>         // see below
     render `/the/result/page`   // OK
?>

The <script> you should render:

<script>
    window.onload = function() {
        history.replaceState("", "", "/the/result/page");
    }
</script>

The result is:

enter image description here

as you can see the form data is POSTed to process.php script.
This script process POSTed data and rendering /the/result/page at once with:

  1. no redirection
  2. no rePOST data when you refresh page (F5)
  3. no rePOST when you navigate to previous/next page through the browser history

UPD

As another solution I ask feature request the Mozilla FireFox team to allow users to setup NextPage header which will work like Location header and make post/redirect/get pattern obsolete.

In short. When server process form POST data successfully it:

  1. Setup NextPage header instead of Location
  2. Render the result of processing POST form data as it would render for GET request in post/redirect/get pattern

The browser in turn when see the NextPage header:

  1. Adjust window.location with NextPage value
  2. When user refresh the page the browser will negotiate GET request to NextPage instead of rePOST form data

I think this would be excelent if implemented, would not? =)

2017/11/15

Source: https://stackoverflow.com/questions/6320113
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]