You need to sign in to do that
Don't have an account?
TLF
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?
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>
All Answers
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>
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>
Hello TLF;
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>
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.
Elegant! I Teh Nerd's suggestion works great!
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.