STOPPING A VISUALFORCE COMMAND BUTTON FROM FIRING THE CLICK EVENT TWICE

I have a Visualforce page with a command button on it…

1	<apex:commandbutton action= "{!doSave}" value="Save"></apex:commandbutton>

This doSave() function on my Apex controller class is inserting a record into the database. The problem is that the users of this page were sometimes double-clicking on the button instead of just clicking on it.  I have come to find out that this will fire the click event twice, which will submit two separate calls back to Salesforce.  This will end up calling the doSave() function twice on the Apex controller class, which will end up creating duplicate records. 

This is not good!  How can we fix it?

I could write some code in the doSave() function to stop those duplicates from being inserted, but I would really like to stop the second click event on the page from firing in the first place.

I first looked into the ondblclick event handler on the commandbutton, but that did not seem to be causing a problem.

I then started to do research on how I could stop the second onclick event from firing and there are a lot of great articles out there about how to do this with JQuery and Javascript.

I finally settled on this solution which was pretty straightforward with only Javascript.  If you have a simpler solution please let me know!

First, I wrote this Javascript function which will return a boolean value.  I placed this function between some script statements at the top of my Visualforce page.

1 2 3 4 5 6 7 8 9 10

var isClicked = false; function checkDoubleSubmit(obj){             if (isClicked) {                 return false;             }else {                 isClicked = true;                 obj.className = 'btnDisabled';//only shows the button as disabled.                 return true;             } }

This checkDoubleSubmit button will let the first click go through by passing through the ‘else’ statement.  I do set the className = ‘btnDisabled’ which will make the button appear gray, but it does not stop the second click from firing.  I had also looked into trying to set a disabled property on the button, which may be cleaner, but I was able to get the above code working first.

Next, I just needed to add a call to this function in my commandButton code on the onclick event as follows…

1	<apex:commandbutton action="{!doSave}" value="Save" onclick="return checkDoubleSubmit(this)"></apex:commandbutton>

Do not forget the ‘return’ before calling checkDoubleSubmit.  The main point is that if a ‘false’ value is returned in the onclick event then its default action, which is to submit the page back to Salesforce, will not occur.

I hope this small snippet is useful for you in preventing multiple click events from firing.

I would love to hear of any cleaner ways to implement this check.  I recognize that if there are multiple commandButtons on a page I would probably need multiple variables to match up with each commandButton.

Have a great day extending Apex and Visualforce to meet your requirements!