Updated (9/2/2009): It appears that this is no longer an issue in the RadControls for ASP.NET AJAX Q2 2009 release. Read this post for a better solution to this problem.
An all too common situation us web developers face is the dreaded “double submit” issue.
Users, for some reason, love to double-click on every submit button you might create in your web application. It’s like an impulse. They MUST submit the record into the database twice.
Poor souls. They just can’t help themselves.
There are a handful of ways to address this issue using javascript, SQL, and server-side code.
I wanted to use javascript because I felt it was the most “lightweight” way to handle this issue.
Plus, my submit button was nested inside of a FormView, that was nested inside of a ContentPanel, that was nested inside of a MasterPage.
Fun.
In any event, I created a javascript function to fire on the OnClientClick property of the submit button:
<asp:Button ID=”btnSubmit” runat=”server” Text=”Submit Assessment Form” ToolTip=”Submit the Assessment Form”
onclick=”btnSubmit_Click” OnClientClick=”DisableSubmit(this);” />
I then created a javascript function on the Masterpage:
<script type=”text/javascript”>
function DisableSubmit(buttonElement) {
document.getElementById(buttonElement.id).disabled = true;
}
</script>
Hmmmm, when I would click the button, nothing would happen.
So I put in an alert and discovered that the javascript would fire, but the button would not enter the “disabled” state.
Frustrating!
Long story longer, I discovered that this would not work if I was using the Telerik RadFormDecorator.
That’s because the RadFormDecorator renames the client id of each control that it skins.
Therefore, the javascript function DisableSubmit was receiving “ctl00_ContentPlaceHolder1_frmAssessment_btnSubmit”, but the actual id was “Skinnedctl00_ContentPlaceHolder1_frmAssessment_btnSubmit”.
The RadFormDecorator was placing “Skinned” at the front of the id.
So I amended the javascript function:
<script type=”text/javascript”>
function DisableSubmit(buttonElement) {
document.getElementById(‘Skinned’ + buttonElement.id).disabled = true;
}
</script>
Now, the button disables appropriately. Yay me!
