Monday, November 8, 2010

Prevent double click

This is the only bulletproof way I know to prevent double clicks. The onclick event has to disable itself. You can't do "onclick='void 0;' in a function that you call from onclick because you may have already clicked three times before that function gets called.

For buttons, just do the onclick.
<input type="button" onclick="this.onclick='void 0;';someFunction();" />

For links you also have to explicitly do nothing in the href. Don't do href="#". That will not work.
<a href="javascript:void 0;" onclick="this.onclick='void 0;';someFunction();">

OK, rbohn says the following also works. If you want to separate all the logic into a single function, you can as long as the function returns false and your onclick returns false. For example: onclick="return myFunc(this);" Also, you must use el.setAttribute and not el.onclick=. el.onclick= will work in some browsers, but not others.

Another nice thing about rbohn's way is that your href can be set to # which is a bit neater. OK, well in a nicely controlled environment, with rbohn's way you can set your href to #, but in the real messy world, you need to have it set to "javascript:void 0;" or "javascript:return 0;". I have seen it break when set to #.

function myFunc(el) {
    el.setAttribute('onclick','return false;');
    document.forms['aviForm'].submit();  
    return false;
}

<a href="javascript:void 0;" onclick="return myFunc(this);">Confirm</a>

<input type="button" onclick="return myFunc(this);" />

No comments:

Post a Comment