Easy Vanilla JavaScript Hack to Prevent Multiple Form Submission from Users

Photo by Sergey Zolkin on Unsplash

Users tend to click form submission multiple times on a website due to the fact that they aren’t aware if they have submitted the form on the first click itself.

Below, I will show an easy Vanilla JavaScript function that prevents users from making multiple form submissions and also informs the user that their form is loading to the next process (i.e, checkout, next page).

Furthermore, this will also enhance your understanding of JavaScript as various HTML DOM methods are used in this.

function "functionname"(){
setTimeout(function(){document.getElementById("submitbuttonID").disabled = true;},"time in miliseconds");
document.getElementById("submitbuttonID").innerHTML = "please wait page reloading";
}
document.getElementById("submitbuttonID").addEventListener('click', "functionname" );

The setTimeout method is used to disable the submit button by the user. Take note that this method kicks in by using the addEventListener method when the user clicks the submit button.

innerHTML is used to then swap the “send message” text with “please wait while page reloading text”. This informs the users that their form has been submitted and they should await for the page to load. Below is a snippet of before and after the user has clicked the submit button.

Figure: Before and after image after the user has clicked the submit button.

That’s it. It’s as simple as that and at the same time, you get to learn about JavaScript and HTML DOM elements. Hope this was educational for vanilla JavaScript users.

More content at plainenglish.io