How to disable an image button that acts like a submit button
I have an image button that acts like 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 click.
Remove the onclick handler on the anchor by clicking on it.
Example:
<a href="#" onclick="/* .. do all your things ... */ this.onclick = function(){}; return false;">
Change the onclick attribute to something like this:
onclick="submitComment('+[id]+'); this.onclick='return false;'; return false;"
Use <input type="image" src="/images/check.png" alt="Comment!">
instead. This will act like a submit button, with the added benefit of not requiring JavaScript. There is no reason to use JavaScript to replicate what HTML can already do perfectly.
removing the onclick handler sounds like the right answer if you need more information on what and how to go to http://www.quirksmode.org/js/events_tradmod.html p>
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 named "submitting.png".