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.
Wrong! There were a number of articles that claimed to have a really simple answer, but I found that their methods just didn’t work. Finally, I located a slightly more complicated form submission script that was acually being used by an ecommerce site. I combined it with some other ideas to make it even better, and here is the result.
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.
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.
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="#">
Try it out:
After clicking on "See it in action", a dummy form is displayed. Try clicking on the form "Submit" button. Look at the Microsoft banner waving (or the Firefox circle turning), so that you know the form is actually being submitted. You will notice that the "Submit" button immediately changes to "Please Wait". (The reason that the page doesn't change during this process is that I used a script-handling page that redirects back to this page, rather than to a typical "Thank You" page.)
No matter how fast you try, it’s impossible to click the "Submit" button before it changes. And if you click it AFTER it changes -- it's too late -- the form can’t be re-submitted without reloading the page.
If you’re STILL not convinced of the merits of this script, right-click and select "View (Page) Source", then see if you can find the URL of my form-handling script for the "See it in action" form on this webpage. If YOU can’t find it, spambots can’t either!
Update - December 19, 2011: I found a much shorter script than the one above. All you need to do is insert the following attribute in your form submit tag:
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.