[SalesForce] Best way to prevent form to be submitted more than once

We have a multistep wizard form where we have a next button which is a command link. We would like to prevent the users from double clicking the button. We tried to disable the command link using javascript but it caused issues in IE.

<apex:actionFunction action="{!navAction}" name="NEXTACTION"  /> //This submits the form
<apex:commandLink action="{!navAction}" onclick="javascript:disabled=true;" onComplete="javascript:disabled=false;NEXTACTION();"
                value="{!$Label.PK_20074}"
                styleClass="button nextButton primary">
                <apex:param assignTo="{!ctrl.eventCode}" value="NextButtonClicked" />
            </apex:commandLink>

So on the above code, we wrote an onclick event to disable the link but on complete we tried to submit the form to our action method which is defined in Next Action as an action function.
This button is in a vf component embedded on all forms.

When we do this, we are getting an error which says "The page submitted is invalid for session." Can you guys tell me what i am doing wrong in this snippet or can you share some code on how you are preventing double clicks on form submits which is browser compatible please?
Thanks
Buyan

Best Answer

This question have many relevant info.

Generally speaking most browser compatible would be the use of apex:actionStatus . Something like this.

<apex:actionStatus id="saveStatus">
<apex:facet name="stop">
    <apex:commandButton value="Save" action="{!save}" status="saveStatus" rerender="saveParentBlock" />
</apex:facet>
<apex:facet name="start">
    <apex:commandButton value="Saving..." disabled="true" status="saveStatus"/>
</apex:facet>
</apex:actionStatus>

But i personally prefer the use of javascript. This way.

function disableBtns(){
     $j('.btn').prop({className:'btnDisabled',disabled:'disabled'});
 }
 function enableBtns(){ 
     $j('.btnDisabled').removeProp('disabled');
     $j('.btnDisabled').prop('className','btn');
 }
<apex:actionFunction name="saveAndNew" action="{!saveAndNew}"/>
<input type="button" class="btn" value="{!$Label.SaveAndNew}" onclick="disableBtns();saveAndNew();" />
Related Topic