How to prevent form resubmission when page is refreshed (F5 / CTRL+R)
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.
I would also like to point out that you can use a javascript approach, window.history.replaceState
to prevent a resubmit on refresh and back button.
<script>
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
</script>
Proof of concept here: https://dtbaker.net/files/prevent-post-resubmit.php (Link no longer works)
I would still recommend a Post/Redirect/Get approach, but this is a novel JS solution.
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.
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
}
Make sure you start the session on every file you are using it with session_start()
This method works for me well, and I think this is the simplest one to do this job.
The general idea is to redirect the user to some other pages after the form submission, which would stop the form resubmission on page refresh. Still, if you need to hold the user on the same page after the form is submitted, you can do it in multiple ways, but here I am describing the JavaScript method.
JavaScript Method
This method is quite easy and blocks the pop up asking for form resubmission on refresh once the form is submitted. Just place this line of JavaScript code at the footer of your file and see the "magic".
<script>
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
</script>