Disabled Save Button on Forms while Saving in Salesforce



How to Disable the Save Button on your Form while the Form is Saving to Prevent Multiple Submissions in a Custom Salesforce Visualforce Page



Salesforce default functionality on forms will disable the save button after the form is submitted to prevent multiple submissions.

The disabled Save button will look like:

Disabled save button after submitting a form in Salesforce
Disabled save button after form submit

When creating your own VisualForce page you can write custom code to mimic this functionality in your forms using just Javascript and modifying the button's CSS styles.





Create Javascript functions to disable and enable the save button




You will need to create 2 Javascript functions that will enable and disable the button by modifying the css and properties of the save button.

I am using jQuery but you can also do this with vanilla Javascript. I am currently using a unique style class attached to the button to look it up for convenience since this page does not get modified very often if ever and also because the element id is used by Salesforce for internal SFDC functionality.

    function disableSave() {
     j$(".saveButtonId").prop("disabled","true");
        j$(".saveButtonId").val("Saving...");
                
        j$(".saveButtonId").css( "border-color", "#c4c4c4" );
        j$(".saveButtonId").css( "color", "#909090" );
    }

    function enableSave() {
        j$(".saveButtonId").removeProp( "disabled" )
        j$(".saveButtonId").val("Save");
            
        j$(".saveButtonId").css( "border-color", "#7f7f7f" );
        j$(".saveButtonId").css( "color", "#333" ); 
    }    


Add events to the Salesforce save button on your Visualforce Page




You will then need to bind your Javascript functions to the onclick and oncomplete event on your save button. I am using binding within the tag since I am using a custom apex:commandbutton Visualforce tag to create the save button.

This will disable the save button on click and re-enable the button when the AJAX request completes that clicking your save button initiated.

<apex:commandbutton action="{!save}" onclick="disableSave()" oncomplete="enableSave()" status="savingStatus" styleclass="saveButtonId" value="Save"> 
</apex:commandbutton>

Popular posts from this blog

How to set up a SQL Server 2008 Local Database

Spring Boot Internationalization with Default Locale for Message Strings

Use Chrome for Development and Allow Cross-domain Javascript and AJAX