How to Prevent Multiple Form Submissions on Page Refresh Using JavaScript
When submitting a form on a webpage, there can be situations where users unintentionally submit the form multiple times, especially when they refresh the page after submitting. This can lead to duplicate entries in your database. In this tutorial, we will explore a simple method using JavaScript to prevent multiple form submissions when the page is refreshed.
Solution Overview
One effective solution is to redirect the user to a different page after the form is submitted. Alternatively, if you need to display a confirmation message or alert, you can use cookies or session storage to store the message. After displaying the message, remove the cookie or session to avoid showing it again.
However, in this tutorial, we will focus on a JavaScript approach using the History API to stop multiple submissions after a page refresh.
Preventing Multiple Form Submissions Using JavaScript
The History API provides two methods, replaceState() and pushState(), to manipulate the browser’s history and change the URL. We can use these methods to prevent the user from submitting the form multiple times during page refresh.
pushState(): Adds a new entry to the browser’s history stack, meaning the user can press the back button to navigate to the previous page.replaceState(): Modifies the current history entry without adding a new one. This is ideal for our case because we don’t want to keep the previous form submission in the browser’s history.
Since we don’t want to retain the previous submission URL in the browser’s history, we will use the replaceState() method.
JavaScript Code to Prevent Multiple Submissions
The idea is simple: after the form is successfully submitted, we replace the current page’s URL with the same URL. This prevents the user from resubmitting the form by refreshing the page.
Here is the JavaScript code to achieve this:
<script>
if (window.history.replaceState) {
window.history.replaceState(null, null, window.location.href);
}
</script>How It Works
- The
window.history.replaceState()method updates the current URL without adding a new entry to the browser’s history. null, null, window.location.href: The firstnullrepresents the state object (which we don’t need in this case), the secondnullis the title (which is also irrelevant for this use case), andwindow.location.hrefis the current URL.
By placing this code at the end of the <body> tag, it will immediately replace the URL after the form is submitted, preventing the user from re-submitting the form if they refresh the page.
Handling Users with JavaScript Disabled
One concern is that if the user has JavaScript disabled, the above code will not run, and the form may still be submitted multiple times. To handle this situation, consider these options:
- Prevent Form Submission with HTML: You can include additional checks in your form to prevent submission if JavaScript is disabled.
- Fallback with Redirect: As a fallback, you can implement a server-side solution to redirect users to another page after the form submission to prevent multiple submissions.