How to disable submit button after click in a form

When submitting a HTML form it can take several seconds before the form is successfully submitted and the response page shown. People can get inpatient and click the Submit button several times which can result in duplicate form submissions. Usually it's not really a problem, but in some cases you might want to prevent this from happening.

Below you will find a simple trick for preventing duplicate submissions:

The first step is to give your submit button a unique id, for example id="myButton":

<input type="submit" value="Submit" id="myButton" />

The second (and last) step is to give two Javascript commands to the <form> tag. The first one will tell the browser to disable the submit button after the form has been submitted and the second one will change the button text to give the user some idea about what's happening. This is the code to add to your form tag:

onsubmit="document.getElementById('myButton').disabled=true; document.getElementById('myButton').value='Submitting, please wait...';"

Your form tag would then look something like:

<form action="contact.php" method="post" onsubmit="document.getElementById('myButton').disabled=true; document.getElementById('myButton').value='Submitting, please wait...';">

That's it. This trick should work in most modern browsers (IE 5+, FireFox, Opera, ...).