function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ 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.