JSF Javascript submit button disabling

In case of submitting forms JSF and Javascript are less friends than cat and dog!

The main problem here is that JSF uses submit button attributes to perform action and actionListener requests to the server. Also JSF catches 'onclick' events to do that.

That means that if you try to do smth like this

<h:commandButton id="submitButton" value="Submit" action="nextPage"
onclick="this.disabled='disabled';"/>

nothing will be send to the server, because button become disabled before JSF performed it's actions.

That's of course the reason why navigation is not working.

This problem could be solved by invoking our custom 'onclick' javascript function after JSF.

Seems like a work for setTimeout() function

function clickButton(but) {
 setTimeout(function(){
  but.disabled='disabled';
 },1);
}

and the button

<h:commandButton id="submitButton" value="Submit"
action="nextPage" onclick="clickButton(this);"/>

You can add this code to any submit button in any JSF form and be sure that it will be disabled just after it was clicked, and no multiple requests will be send. Well... nearly just after =)