This time I will share jQuery Plugin and tutorial about Auto Disable Submit Button On Form Submit – jQuery Disable With, hope it will help you in programming stack.
Disable With is a simple yet useful Vanilla JavaScript (jQuery is optional) 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.
01 |
<form action="index.php" method="post"> |
02 |
<div class="form-group"> |
03 |
<label for="exampleInputEmail1">Email address</label> |
04 |
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> |
05 |
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> |
07 |
<div class="form-group"> |
08 |
<label for="exampleInputPassword1">Password</label> |
09 |
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> |
11 |
<div class="form-check"> |
12 |
<input type="checkbox" class="form-check-input" id="exampleCheck1"> |
13 |
<label class="form-check-label" for="exampleCheck1">Check me out</label> |
15 |
<input type="submit" value="Sign in" data-disable-with="Signing in..." /> |
2. Download and insert the JavaScript file jquery-disable-with.js after jQuery library.
2 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
3 |
crossorigin="anonymous"> |
5 |
<script src="dist/jquery-disable-with.min.js"></script> |
3. Initialize the plugin and done.
1 |
new DisableWith('data-disable-with'); |
Changelog:
2020-06-21
2020-06-19
2020-06-11
2020-05-17
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
This awesome jQuery plugin is developed by Anduin2017. For more Advanced Usages, please check the demo page or visit the official website.
