JQuery plugin : lockSubmit - stop submit button from allowing doubleclicks

Stop Double Clicks on form submits

...without losing the submit button's name/value in submited form data

This is a small JQuery plugin function which allows you to disable a submit button on the onClick event, while still having the button's name/value passed to the form. It also changes the value of the selected button when clicked to "Please wait..." or any text you pass over to the settings.

This pluging was created because normally if you disable a button with an onClick event, then that buttons name/value pair is not submitted with the form data. So this is useful if you have a submit button on a page which you are checking for being clicked when the form is submitted (e.g. if you have more than one button in a form) and you want to stop any double clicks on the button.

Demo

Download

jquery.lockSubmit.zip

Options

• "submitText" - Sets what the new value of the submit is set to on click. This value is not submited, its the original value of the button which is submited.
• "onAddCSS" - CSS class which is added to any submit effected by this plugin
• "onClickCSS" - CSS which is added to the submit button upon click.

Usage

1. Download/Extract JQuery
2. Download/Extract our plugin
3. Include jquery and the plugin in your page with;

   <script type="text/javascript" src="jquery.min.js"></script>
   <script type="text/javascript" src="jquery.lockSubmit.js">
   

4. 4 - Include a jQuery selector function call. Below are some examples;

   Examples

   Basic Example

   <script type="text/javascript">
   jQuery(document).ready(function() {
   jQuery('#someid').lockSubmit();
   });
   </script>
   

   Apply to all submits on a page;

   <script type="text/javascript">
   jQuery(document).ready(function() {
    jQuery(':submit').lockSubmit();
   });
   </script>
   

   Using Options

   <script type="text/javascript">
   jQuery(document).ready(function() {
    jQuery(':submit').lockSubmit({
      submitText: "Please wait",
      onAddCSS: "submitButtons",
      onClickCSS: "submitButtonsClicked"
   });
   });
   </script>
   

License

LGPL

Change Log

• v1.03 - Changed the method used to disable the submit. Improves cross browser compatibility and effectiveness
• v1.02 - Add Extra options for CSS
• v1.01 - Update to improve different browser compatibility
• v1.0 - First Version

Donate

Here is a paypal link for if you find this useful and would like to buy me a drink!

jQuery Plugins Project Page

Lock Submit