HTML, JavaScript, Programming, Web Development

Simple JavaScript to Stop Forms Being Submitted Twice

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()">
Advertisement

2 thoughts on “Simple JavaScript to Stop Forms Being Submitted Twice”

  1. 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?

    1. 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s