I just implemented something that should have been simple, and actually is simple, but which ended up being a bit more of a struggle than it should have been.
We have a site where occasionally we were getting duplicate payment transactions when people submitted orders. The transactions were all within a couple seconds of each other, so it appeared that people were just double-clicking the submit button (despite, of course, a message on the page saying to only click the button once). We did, once upon a time, have javascript code in place that disabled the submit button when it was clicked once, but that code has been removed somewhere along the line. I think it had been disabled due to the difficulty of dealing with client side validation -- i.e. if the client-side validation failed, the button should not be disabled, because then the user will not be able to submit the form.
I found a variety of posts online about dealing with this problem. The basic solution is simple, which is to insert code into the form submit handler that runs the client-side validation and only disables the button if it passes. First I set up this javascript function:
<script type="text/javascript">
function handleSubmit() {
if (typeof (ValidatorOnSubmit) == 'function' && ValidatorOnSubmit() == false) {
return false;
} else {
$("form#aspnetForm input[type=submit]")
.click(function() { return false })
.fadeTo(200, 0.5);
return true;
}
}
</script>
Then in the page's code behind, I registered the onsubmit function like so:
Page.ClientScript.RegisterOnSubmitStatement(Me.GetType, "OnSubmitScript", "return handleSubmit()")
The javascript function runs the same code that ASP.Net automatically runs for client-side validation, and, if the validation passes, uses jQuery to disable the submit button and fade its appearance. The fading isn't necessary, but since it's so easy to do with jQuery, why not?
There is one thing in there though, that threw me for a loop. Most of the posts I found online set the disabled parameter for the button, which you could do with jQuery like this:
$("form#aspnetForm input[type=submit]").attr("disabled", "disabled");
But when I did that I found that the submit action tied to the button no longer fired on the server side. After puzzling over this for a while, I realized that when the button is disabled, the button value is no longer sent along with the form parameters, and thus the server-size click event for the button is not fired. I wasn't able to find any references to this problem online (hence the impetus for this blog post). So instead of using the disabled parameter, I set the click event of the button to return false, which seems to work well.
Something else that I like about this solution, is that it is very generic. Since I use a generic selector to get the submit button ("form#aspnetForm input[type=submit]"), the javascript function could be included in a site-wide javascript library, and the onsubmit function could be registered in a master page to enable this functionality for all submit buttons on a site. I'm not ready to do that on this site, since I just want to make sure the order checkout works well for now, but it's nice to know that if this comes up again, I can fix it in a flash.
