Disable Submit Button to Prevent Double-Submit
This programming snippet is from the book, “jQuery in Action” which I read and practiced Spring 2009. The Chapter (3) was titled “Bringing pages to life with jQuery”.
I post these old code snippets for a few reasons. One is to demonstrate my programming learning, experience, and progression. Another reason is to make sure my code and solutions are indexed by search engines, so that other beginning programmers may get help if they need it. Finally, it is just nice for me to have my own code snippet library, to easily find snippets that I remember doing a particular job but I cannot always recall where I found it.
Problem: people sometimes double-click (or more) submit buttons on html forms. Either they do it accidentally because their finger slipped or they did not think they clicked it the first time, or they just like the clicking sound. This can cause a problem with the form being submitted multiple times to the server.
Solution: This jQuery script disables the submit button after the first click. Of course you still need server side code to prevent multiple submissions in case JavaScript is disabled, but this is a good little script for the front line defense.
$("form").submit(function() {
$(":submit",this).attr("disabled", "disabled");
});
