stop multiple form submissions on Page refresh

How to prevent multiple form submissions on Page refresh?

Here I will show you how to avoid multiple form submissions on page refresh so that you can prevent duplicate entries. Let’s see –

One thing you can do that is – redirect after the POST, If you want to show some messages then store in a cookie or session, and after reading the value remove the cookie/session.


Stop multiple form submissions using JavaScript

With the help of the JavaScript history API you can easily prevent multiple form submissions on Page refresh.

replaceState() or pushState(), You can use one of these two methods of the History API.

replaceState() VS pushState()

Both will change the URL in the browser. But in pushState, the previous URL remains in the browser history.

So we don’t want to keep the previous URL in the browser history, therefore we will use the replaceState() method.

Here is the JS code to stop multiple form submissions

Basically, we are replacing the current page URL with the new current page URL.

window.history.replaceState(null, null, window.location.href);

Place the following JS code at the bottom of your body tag.

<script>
    if(window.history.replaceState){
        window.history.replaceState(null, null, window.location.href);
    }
</script>