How to prevent submit button being pressed twice

Question

I am trying to prevent the users of a system to not press the “Submit” button twice within Oracle ApEx but am unsure how to target the following code using jQuery, i.e.:

<a href="javascript:doSubmit('MY_SUBMIT')">
<img border="0" id="MS_BTN" alt="Submit Request" src="submit_btn.gif">
</a>

I basically want to make sure that all required form validation has passed and when the user presses the “Submit” button, I would like to somehow hide the button immediately after it has been pressed.

I have tried the following code as I cannot use the src value, i.e.:

$("a:contains('MY_SUBMIT')").hide();

But this did not work.

How can I add this button to an onclick event and basically hide this button from the user on the successful initial click?

Answer 1

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.

Answer 2

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;
}