One of my clients once complained that she frequently received two copies of emails sent to her from her website contact form.  I told her I would find a solution to the double-click problem, and began a Google search to see if any suitable scripts were already available.  I figured that something must be out there, since it would be pretty serious if someone clicked twice on the form "Submit" button for a credit-card purchase.

Description of the script:

1) In order to further my goal of using unobtrusive scripting, the script is located in an external file.

2) Keeping the script off the webpage has a beneficial side-effect.  Some spammers use robots which can harvest the address of your form-handling script and use it to send unwanted emails to your own website mailbox.  This script dynamically adds this address when the form is submitted.  It is never visible in the HTML form code of your webpage.

3) After one click on the form "Submit" button, the text on the button is changed to "Please Wait", and it turns red (or any other color you wish).

4) The script keeps track of that first click, and if the "Submit" button is clicked again, bypasses a second form submission.

 1  var count = 0;
 2  function submitForm()
 3  {
 4   if (!document.getElementById) return false;
 5   var submit = document.getElementById("submit");
 6   var form = document.getElementById("form");
 7   submit.onclick = function()
 8   {
 9     // Insert checks for proper form fields here
10     if (count == 0)
11     {
12       count++;
13       var url = "[URL of CGI form-submission script]";
14       form.setAttribute("action",url);
15       submit.setAttribute("value","Please Wait");
16       submit.style.backgroundColor = "red";
17       form.submit;
18       return true;
19     }
20     return false;
21   }
22   return true;
23 } 

How to use the script:

1) Substitute the address of your CGI form-handling page for the [ ] in line 13.

2) In place of line 9, you may want to insert code to check for the proper input of form fields, such as was presented in a previous snippet, Alert Box - Email Form Field Required.

3) Follow the instructions on the main Snippets Page for how to install a javascript function that runs at load time.

4) Make sure that your <form>, and <submit> tags contain the id’s specified in lines 5-6 of the script.  This script and your CSS stylesheet can use the same id’s.

5) The HTML form code should NOT contain the URL of your form-handling page, if you want to spam-proof your form. The <form> tag should look something like:

<form id="form" method="post" action="#">

6) Finally, there is one last thing that is not required, but I always use whenever a script does not degrade well. Just before the HTML form code starts, insert an explanation for users that don’t have javascript, such as:

<noscript>
  <h3 style="color:red">JavaScript is required to use this form.</h3>
  <p>For instructions on enabling JavaScript,<br />
  please see <a href="http://www.professorsopportunities.com/javascript.html">
  this page</a>.</p>
</noscript>

Most users will never see the contents of this tag.  I hate using non-degradable javascript, but in this case it is necessary to achieve the benefit of spam-proofing the form.  (However, if you don’t like this, you can put the real URL back in the <form> tag to make the form available even for retrograde users.)

Update - December 19, 2011: I found a much shorter script than the one above at RevolutionWebDesign.com .  All you need to do is insert the following attribute in your form submit tag:

onclick="this.disabled=true;this.form.submit();"

Of course, this script is not off-page, and it lacks two of the salient features of my script: 1) it doesn't hide the URL of the CGI form-handling page from spammers, and 2) it lacks visual confirmation that the form has been submitted.