handler first checks to see whether the form is already in the process of submitting (second click).
If so it displays an alert and disables the submit button to prevent further attempts to submit the form.
The second button restores the initial state: In the default state, clicking on the Submit button will call our form validation script (see below) to make sure that all the fields have been populated.
If that is not the case then there is an alert message and the script halts.
The trick is to use Java Script to set the in a text input field - the submit button will be disabled to prevent double-clicking.
If you're already using Java Script form validation then the command can instead be added to the script as follows: It's important that the command to disable the button be added at the end of the script, otherwise, if the validation fails, the user will have no opportunity to re-submit the form.
The difference from previous examples is the alert when the button is being disabled.
This example first disables the button and then changes the label from "Submit" to "Please wait...".
A quick fix for this is to add an In this scenario the first click on the link will function normally taking the user to the target href.
At the same time it adds a new event listener to capture and disable future clicks on the same link.
If the form is not already being submitted (first click) the handler runs the usual Java Script validation and, if successful, allows the form to be submitted.
attribute see our article on HTML5 Form Validation.