Auto Disable Submit Button On Form Submit - jQuery Disable With

Auto Disable Submit Button On Form Submit - jQuery Disable With
File Size: 32.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Disable With is a simple yet useful jQuery plugin that automatically disables submit button within your HTML form to prevent double clicking or multiple form submission.

The plugin also has the ability to alter the button text as you click on the submit button.

How to use it:

1. Insert a submit button to your html form and specify the text to display when the form is submitted.

<form action="index.php" method="post">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
    <input type="submit" value="Sign in" data-disable-with="Signing in..." />
</form>

2. Download and insert the JavaScript file jquery-disable-with.js after jQuery library. That's it.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="src/jquery-disable-with.js"></script>

Changelog:

2019-02-07

  • v1.2.3: Won't process when the control is not in a form.

2018-12-16

  • v1.2.2: Fix an issue that may not support jquery validation.

2018-05-09

  • v1.1.0

This awesome jQuery plugin is developed by Anduin2017. For more Advanced Usages, please check the demo page or visit the official website.