This time I will share jQuery Plugin and tutorial about Disable Submit Button If Input Is Empty – jQuery snbutton, hope it will help you in programming stack.
snbutton is a super small, cross-browser jQuery plugin that disables the submit button (and changes its content) whenever an input field is empty.
How to use it:
1. Load the snbutton plugin’s script snbutton.js after jQuery JavaScript library as this:
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="snbutton.js"></script> |
2. Initialize the plugin and we’re ready to go.
1 |
SNButton.init("snbtn"); |
3. Add the ID ‘snbtn’ to the submit button and specify the related input field using data-snnode attribute:
1 |
<input id="some-input-field" placeholder="input something"> |
2 |
<button id="snbtn" data-snnode="some-input-field">SUBMIT</button> |
4. Change the text when the submit is disabled or enabled.
1 |
<input id="some-input-field2" placeholder="input something" /> |
2 |
<button id="snbtn2" data-snnode="some-input-field2">SUBMIT</button> |
1 |
SNButton.init("snbtn2", { |
2 |
enabletext:"OK Submit", |
3 |
disabletext:"Input First" |
5. Apply the plugin to multiple input fields.
1 |
SNButton.init("snbtn", { |
2 |
fields: ["some1", "some2", "some3"] |
Change log:
2017-08-27
- allows to apply the plugin to multiple fields.
This awesome jQuery plugin is developed by jvyyuie. For more Advanced Usages, please check the demo page or visit the official website.
