Best way to prevent form to be submitted more than once

Question

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

Answer 1

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();" />

Answer 2

Try to add "rerender" attribute to apex:actionFunction. Without "rerender" attribute for some reason it does not work well. Maybe it will solve the problem

Answer 3

I think you can have two link buttons in the page which are the same value, but one is apex:commandlink, another one is html link and is hidden by default, when user click the link, you can toggle them to hide apex link and show html link.

Only change the style using the javascript.