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