In this article, I will teach you how to prevent duplicate form submission on refresh. I have found many programmers have problem of multiple form submission problem on refresh. Previously, I was also facing same problems some years earlier. The best solution for this is using Post-Redirect-Get Pattern. Before diving into the Post-Redirect-Get Pattern, you need to understand about the workflow of Post and Get.
The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers. HTTP works as a request-response protocol between a client and server. The two most commonly used methods for Request-Response between client and server are: GET and POST.
GET – Requests data from a specified resource or when you want to retrieve data (GET DATA)POST – Submits data to be processed to a specified resource or when you want to send data (POST DATA)
You can find a nice article explaining about HTTP Protocol, GET and POST at Wikipedia. Also, you can get nice explanation about the difference between GET and POST at this Stack Overflow answers. I hope now you have a clear understanding about the GET and POST methods. Now, let’s dive into our actual problem.
What is wrong with POST method?
As you see, POST method submits data to be to the server, you will face problem with refresh. It is okay on first submit, as data are stored on the server. But, as you refresh the browser, POST method is again executed.
So, this result in duplicate submission of data to the server. So, what’s the problem? Suppose you have just made a payment for a thing you have just bought.
Accidentally, you refresh the browser. Oh crap, now you see you have paid double. This is just a simple case scenario, there are other tremendous cases where duplicate form submission may lead to disaster result.
How to Prevent duplicate form submission on refresh?
Here comes the actual problem. To answer this question, we will use Post-Redirect-Get Pattern (PRG Pattern).
What is POST-REDIRECT-GET Pattern?
According to the Wikipedia, Post/Redirect/Get (PRG) is a web development design pattern that prevents some duplicate form submissions, creating a more intuitive interface for user agents (users). The POST-Redirect-GET (PRG) pattern is commonly used in web applications to prevent duplicate submit of forms when refreshing a POST request and navigation problems when using browser back/forward button to page between POST requests. As POST method is used to submit the form, your form will be submitted multiple times as you refresh the browser. Of course, it not good to submit multiple times on refresh. It may be sensitive as in Payment Cases, API Booking Request cases, and so on. So, this PRG Pattern helps to remove such duplicate form submissions. Very nice explanation can be found on this Wikipedia article.
How does POST-REDIRECT-GET WORK?
In normal POST method execution, there is only one request. In PRG Pattern, this single request is splitted into two request. First, POST method is executed. Second, GET method is executed. After POST method, instead of returning a result page to the users, the page is redirected and results are displayed using GET method. In short, first it post the data to the server and second is to get output to the user.
So, when a user refresh the browser, browser sends empty GET request to the server. As the request is empty, it doesn’t make any changes on server status (database). It only get the data from the server and display to the user. When the user press the “Back Button” on result page, it take the user to the form input page. And if the user again presses the “Forward Button”, it again displays the result page without form submit. So, user are absolutely free to perform actions of their choices.
Thus we see that, the working summary of POST-REDIRECT-GET Pattern are:
1. Post the input data to the server
2. Redirect the user to the new result page
3. Get data using GET method and display in result page
Now, let’s make practical implementation of our discussion. For this, we will have three files. First file is for showing the form to the user, second file is for processing the data after form has been submitted, redirection to new page and last file is to display the result data after redirection.
First File: index.html
<html>
<head>
<title>Prevent duplicate form submission on refresh</title>
</head>
<body>
<h3 class="step">Please fill below form</h3>
<form action="process.php" method="post">
<input type="text" name="username">
<button type="submit" value="submit">Submit</button>
</form>
</body>
</html>
Explanation: This is just a simple html file with a form in it. When form is submitted, it call the process.php file.
Second File: process.php
//start new session
session_start();
//set username to a variable named $username
$username = $_POST['username'];
//set the variable in session
$_SESSION["username"] = $username;
//redirect the user to new page
header('Location: display_result.php');
exit();Explanation: This is a PHP file. For clarification of code, I have made comment for each line. For accessing database, inserting into database and getting value from database, it’s a bit long code. So, I have decided to use Session. The main purpose of this demonstration is to prevent duplicate form submission, Session can show the same expected result as DB. This process is done in background. After process is completed, it automatically redirects to the display_result.php page. header() is used to send a raw HTTP header.
Please note that, Location is followed by single colon (:), space and file name.
Third File: display_result.php
//start session
session_start();
//get the data from session stored earlier.
$username = $_SESSION['username'];
//display the result to user.
echo $username;Explanation: This is the actual page shown to the user. This is automatically called after the form has been submitted. In this page, session is started. Value is accessed from session and display to the user.
To test if whether it prevents duplicate or not, you can simple press f5 to reload the page. Now you must see, it is not asking for confirmation to submit the page. Similarly, you can press the Back Button which display the form and Again pressing the Forward Button, the result page will be displayed without submitting the form. Thus, it removes the duplicate submission of form which is our mission.
Thus, we have successfully prevent the page from duplicate submission of form data on refresh. Hope this article helps you to prevent the duplicate form submission on refresh and have clear understanding about the Post-Redirect-Get Pattern.
If you want to learn about creating CRUD application in Laravel with example code, you can follow Laravel 5.6 CRUD Application from scratch. Similarly, you can also get to about VueJs with Introduction to VueJs
