To prevent forms from being submitted more than once I sometimes like to add a simple JavaScript function to the Submit button that disables the button when it is clicked. This does not provide a complete guarantee that the data is not sent twice, but it is effective at reducing the risk of multiple submissions.
Specifically here is an example of the JavaScript function:
<script language="javascript" type="text/javascript"> function handleFormSubmit(){ var btnInitiateProcess = document.getElementById('btnInitiateProcess'); btnInitiateProcess.style.display = 'none'; } </script>
Then in the HTML of the submit button I add a call to the function as follows:
<input type="submit" id="btnInitiateProcess" onClick="handleFormSubmit()">
Hi Justin,
This code snippet is very helpful.
Do you then wait for the process that is intended to run after the submit button is clicked for you to re-enable the submit button?
Absolutely :)
Depending on the client’s needs the duplicate form submission catcher can become significantly more involved and/or even be caught at the server level through a separate check. There is a good blog about it written by William Bontrager that describes several escalating methods.
The most secure method is to compare each form field for changes. Although this is significantly more time consuming to build, it is also a secure method if the data integrity is important.