Javascript Code Prevent Multiple Form Submits

Javascript Code to Prevent Multiple Form Submissions by Creating and Toggling the Forms 'data-submitting' Attribute.

This method to prevent more than one submission of a form involves creating/toggling a 'data-submitting' attribute to the form. Once the submit event has occurred, the code will set this attribute to true and any further attempts to again submit the form clicking the submit button for example will be blocked because the 'data-submitting' attribute will already be set to true.

The 'data-submitting' attribute is NOT a predefined form attribute but a made up one for the purpose of keeping track of if the form has been submitted once or not. You can create any attribute name you wish after 'data-' such as 'data-giggles' or 'data-ridiculous' or anything you want but just make sure to adjust the javascript code below to account for this.

// get the form element, assuming you set the id of the form id="formVerify" const frmVerify = document.getElementById("formVerify"); // ensure the form exists before adding the event listener if (frmVerify) { frmVerify.addEventListener("submit", function(event) { // prevent the default form submission action event.preventDefault(); // ensure the form has a 'data-submitting' attribute if (!frmVerify.hasAttribute("data-submitting")) { frmVerify.setAttribute("data-submitting", "false"); } // check if the form is already submitting if (frmVerify.getAttribute("data-submitting") === "true") { console.log("Form is already being submitted. Please wait."); return false; } // mark the form as submitting frmVerify.setAttribute("data-submitting", "true"); // submit the form (you can add async operations or validations here if needed) frmVerify.submit(); }); }