How to Disable a CommandButton After First Click?

How to Disable a CommandButton After First Click?

On December 16, 2025, Posted by , In Salesforce Course,Salesforce Training, With Comments Off on How to Disable a CommandButton After First Click?
How to Disable a CommandButton After First Click

Question:

I have an <apex:commandButton> on a Visualforce page that invokes a controller method. The controller method saves some data and then returns a PageReference to redirect the user to a different page. The problem is that users can click the “Save” button multiple times before the method completes and the redirect occurs, which can cause duplicate submissions.

Here is a simplified version of my code:

Visualforce Page:

<apex:commandButton value="Save" action="{!save}"/>

Controller:

public PageReference save() {
    // Save logic here...

    // Redirect to parent opportunity
    return new PageReference('/' + opp.Id);
}

I tried wrapping the button in an <apex:actionStatus> with facets to show a disabled version of the button while processing. However, that approach required setting a rerender property, which prevented the redirect from happening.

For example:

<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>

This renders correctly and prevents multiple clicks, but it does not redirect to the Opportunity page on completion. How can I disable the command button after the first click while still allowing the redirect to work?

Answer:

The most reliable way to prevent multiple submissions while still supporting a full page redirect is to use JavaScript. The idea is to intercept the click event, call an actionFunction to post the form, disable the buttons, and prevent the form from being submitted a second time. When the form submission completes, you can re-enable the buttons if needed.

Enhance your career with CRS Info Solutions Salesforce training, providing expert mentorship, hands-on experience, and in-depth knowledge—sign up for a free demo today!!!

Here is an example using jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/latest/jquery.js"></script>
<script>
    function buttonsEnabled(enabled) {
        var $buttons = jQuery('.btn');
        if (enabled === false) {
            $buttons.toggleClass('btnDisabled', true).attr('disabled', 'disabled');
        } else {
            $buttons.toggleClass('btnDisabled', false).attr('disabled', null);
        } 
    }

    function doSomeWork() {
        // Call the action function to post the form
        doSomeWorkActionFunction();

        // Disable all buttons
        buttonsEnabled(false);

        // Prevent default form submission
        return false;
    }
</script>

<apex:form>
    <apex:actionFunction 
        name="doSomeWorkActionFunction" 
        action="{!save}" 
        oncomplete="buttonsEnabled(true);" />

    <apex:commandButton 
        value="Save" 
        styleClass="btn" 
        onclick="return doSomeWork();" />
</apex:form>

This approach works because the actionFunction handles the form submission, while the JavaScript disables the button to prevent multiple clicks. The controller method still returns a PageReference to redirect, and because no rerender is specified, the full page redirect occurs as expected.

Alternative Answer:

If you don’t want to use jQuery, you can achieve the same behavior with plain JavaScript. The main idea is the same: disable the button after the first click, then rely on the controller to handle the redirect.

For example:

<apex:commandButton 
    value="Save" 
    action="{!save}" 
    onclick="this.disabled=true; this.value='Saving...';" />

This simple inline JavaScript disables the button and changes its label immediately after it is clicked. Since there is no rerender, the PageReference redirect still works. However, unlike the first solution, this does not automatically re-enable the button if the operation fails and the page does not redirect.

Summing Up

To prevent multiple submissions of a Visualforce commandButton, you can either disable the button with JavaScript after the first click while letting the controller handle the redirect, or use an actionFunction to post the form and manage button states dynamically. The JavaScript-based solution offers the most control, ensuring buttons are disabled during processing and re-enabled when complete. A simpler inline approach can also work but won’t handle failures gracefully.

Transform Your Career with Salesforce Training in Bangalore

Unlock the doors to a successful career with our industry-driven salesforce course. Tailored to help you become an expert in the Salesforce ecosystem, our program offers in-depth training across Admin, Developer, and AI tracks, along with expert guidance for certification and thorough interview preparation.

Our hands-on learning approach equips you with practical skills, ensuring you’re ready to tackle real-world challenges and stand out in the job market. Salesforce training in Bangalore With comprehensive class materials, personalized mentorship, and a focus on practical learning, we provide everything you need to excel.

Take the first step towards transforming your career—join our free demo class today and discover how our expert-led training can make a difference!!!

← →
Comments are closed.