+ Start a Discussion
TLFTLF 

Disabling a commandButton to prevent double submission

I'm trying to disable a commandButton on my VF page on click because I'm invoking a possibly long running action in my controller (10 seconds or more), and I wish to prevent the user from clicking the button again, and double submitting. I tried doing this using a simple javascript onclick function that disables the button and returns true. This doesn't work because once I disable the button in javascript, the action method doesn't get invoked in my controller. Any other suggestions?

Best Answer chosen by Admin (Salesforce Developers) 
TehNrdTehNrd

I use the actionStatus tag to hide the button as soon as it is pressed:

<apex:pageBlockButtons>
<apex:actionStatus id="status" >
<apex:facet name="start">
<apex:outputPanel >
Merging... <apex:image value="{!URLFOR($Resource.blueSquares)}"/>
</apex:outputPanel>
</apex:facet>
<apex:facet name="stop">
<apex:outputPanel >
<apex:commandButton value="Merge" action="{!mergeOpps}" rerender="error1,error2" status="status"/>
<apex:commandButton value="Cancel" action="{!cancel}" immediate="true"/>
</apex:outputPanel>
</apex:facet>
</apex:actionStatus>
</apex:pageBlockButtons>

 

 

 

 

 

Message Edited by TehNrd on 10-29-2009 03:57 PM

All Answers

NaishadhNaishadh

Hi,

 

Here is the code.

 

<html> <form onsubmit="if (window.ffInAlert) { return false; }if (window.sfdcPage && window.sfdcPage.disableSaveButtons) { return window.sfdcPage.disableSaveButtons(); } action="any action"> <input class="btn" type="submit" value="Disabled on Save"/> </form> </html>

 

TehNrdTehNrd

I use the actionStatus tag to hide the button as soon as it is pressed:

<apex:pageBlockButtons>
<apex:actionStatus id="status" >
<apex:facet name="start">
<apex:outputPanel >
Merging... <apex:image value="{!URLFOR($Resource.blueSquares)}"/>
</apex:outputPanel>
</apex:facet>
<apex:facet name="stop">
<apex:outputPanel >
<apex:commandButton value="Merge" action="{!mergeOpps}" rerender="error1,error2" status="status"/>
<apex:commandButton value="Cancel" action="{!cancel}" immediate="true"/>
</apex:outputPanel>
</apex:facet>
</apex:actionStatus>
</apex:pageBlockButtons>

 

 

 

 

 

Message Edited by TehNrd on 10-29-2009 03:57 PM
This was selected as the best answer
prageethprageeth

Hello 

You need not to disable the button to prevent double submit. 

 

 

<script>

var isClicked = false;

function checkDoubleSubmit(obj){

if (isClicked) {

alert('You clicked before.');//For testing message only.

return false;

}else {

isClicked = true;

obj.className = 'btnDisabled';//only shows the button as disabled.

}

}

</script>

<apex:form>

<apex:commandButton value="ClickMe" onclick="checkDoubleSubmit(this);"/>

</apex:form> 

 

 

TLFTLF

Thanks for the suggestions... I didn't get to try them all. I actually ended up going with this:

 

<apex:commandButton id="placeOrderButton" action="{!complete}" value="Place Order" onclick="setTimeout('document.getElementById(\'' + this.id + '\').disabled=true;', 50);" />

 

 

Disabling the button after a brief delay, thus allowing it's value to be submitted in the form.

Kirk F.ax361Kirk F.ax361

Elegant!  I Teh Nerd's suggestion works great!

dmchengdmcheng

TLF's solution worked best for me, thanks for posting.  I wanted to use tehnrd's code but I need to go to another VF page after the processing is done, and the actionStatus process was just returning to the original page.