A Library to Enable Auto-Disable Options When Submitting a Form | jQuery Disable With

form-submit-button-disabled-jquery

jquery-disable-with is a jQuery add-on to enable automatically disable options when submitting a form in data disable attributes. This plugin automatically disables the submit button within your HTML form to prevent double-clicking or multiple form submissions.

The plugin also has the ability to change the button text while the submit button is clicked.

Must Read: jQuery Plugin That Transforms A HTML Select Input Into A Toggleable Button

How to make use of it:

1. Insert a submit button to your HTML form and specify the text to show 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 the jQuery library.

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

3. Initialize the plugin.

new DisableWith('data-disable-with');

See Demo And Download

Official Website(Anduin2017): Click Here

This superior jQuery/javascript plugin is developed by Anduin2017. For extra Advanced Usage, please go to the official website.