Code Snippet: Form Submission - No Double-Click Possible

One of my clients complained recently that she frequently received two copies of emails sent to her from her Contact Page.  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 "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 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 of your webpage.

3) After one click on the form’s "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 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 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 <form> tag should NOT contain the URL of your form-handling page, if you want to spam-proof your form. It 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 form 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.)


Try it out:

After clicking on "See it in action", a dummy form is displayed.  Try clicking on the "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 ( don’t try that ! ) -- 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, "View (Page) Source", and see if you can find the URL of my form-handling script for the dummy form on this page.  If YOU can’t find it, spambots can’t either!