how to disable a image button that acts as submit button

Question

I have a image button thats acts as a form submit button:

<a href="#" onClick="submitComment('+[id]+'); return false;"><img class="submitcommentimg" id="submitcommentimg<?php echo $id; ?>" src="/images/check.png" alt="Comment!" border="0"></a>

What is the best way to 'disable' it to prevent accidental double clicking.

Answer 1

Remove the onclick handler on the anchor upon clicking on it.

Example:

<a href="#" onclick="/* .. do all your things ... */ this.onclick = function(){}; return false;">

Answer 2

Change your onclick attribute to something like this:

onclick="submitComment('+[id]+'); this.onclick='return false;'; return false;"

Answer 3

removing the onclick handler sounds like the right answer, if you need more information on what and how please go to http://www.quirksmode.org/js/events%5Ftradmod.html

Answer 4

Use <input type="image" src="/images/check.png" alt="Comment!"> instead. This will act as a submit button, with the added advantage of not requiring JavaScript. There's no good reason to use JavaScript to replicate things that HTML can already do perfectly well.

Answer 5

The best way is to make a "Submitting..." image and change the code like this:

<a href="#" onclick="this.onclick = "return false;"; this.getElementsByTagName('img')[0].src="/images/submitting.png"; submitComment('+[id]+'); return false;">
    <img class="submitcommentimg" id="submitcommentimg<?php echo $id; ?>" src="/images/check.png" alt="Comment!" border="0">
</a>

...or something like that.

In this example the image is called "submitting.png".