How to prevent submit button being pressed twice

Here's an example how to do this with jQuery:

HTML:

<a id="mySubmit" href="#">
<img border="0" alt="Submit Request" src="submit_btn.gif">
</a>

Code (run after document has loaded):

$("#mySubmit").click(function(event) {
    $(this).hide();
    // do other stuff here
    return(false);
});

And, a working example: http://jsfiddle.net/jfriend00/CtpLU/

Or, you could do it with only the image and no <a> tag like this:

<img id="mySubmit" border="0" alt="Submit Request" src="submit_btn.gif">

$("#mySubmit").click(function(event) {
    $(this).hide();
    // do other stuff here
    return(false);
});

Other possible solutions besides hiding the button are:

  1. To set a flag that you've already submitted and don't do it a second time.
  2. Record the time of last submit and don't allow two submits within some period of time (like within 5 minutes).
  3. Unbind the event handler so clicking the submit button no longer does anything.
  4. Code the server to ignore two submits from the same client within some time period.

Maybe set a global var that changes when the link is first clicked

var clicked = false;

function doSubmit(){
  if(clicked) return;
  clicked = true;

  // all of your code //

  clicked = false;
}