jQuery Plugin To Generate Repeatable Input Fields AddRemoveTextbox - Download jQuery Plugin To Generate Repeatable Input Fields - AddRemoveTextbox

Download jQuery Plugin To Generate Repeatable Input Fields – AddRemoveTextbox

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin To Generate Repeatable Input Fields – AddRemoveTextbox, hope it will help you in programming stack.

jQuery Plugin To Generate Repeatable Input Fields AddRemoveTextbox - Download jQuery Plugin To Generate Repeatable Input Fields - AddRemoveTextbox
File Size: 17.3 KB
Views Total: 1720
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Just another jQuery plugin which allows to dynamically generate / remove repeatable input fields by clicking on the ‘add’ / ‘remove’ buttons. Depending on your browser’s support for specialized input types, you might not see specialized behavior, and might see standard text boxes instead. 

How to use it:

1. Put the latest version of jQuery and the jQuery AddRemoveTextbox plugin’s script at the bottom of the html page.

view source
1 <script src="//code.jquery.com/jquery.min.js"></script>
2 <script src="jquery.addremovetextbox.js"></script>

2. The input field must have the same id and name value as this:

view source
1 <input type="text" id="demo" name="demo">

3. Just call the function on the input field and done.

view source
1 $("#demo").addRemoveTextbox();

4. Config the add/remove buttons.

view source
01 $("#demo").addRemoveTextbox({
02   // A CSS class to style the 'Add' button.  The generated HTML will be a <span>, so it is
03   // assumed that you will use CSS to define a background image.
04   addButtonClass      : "addButton",
05  
06   // Hover text for the 'Add' button
07   addButton<a href="https://www.jqueryscript.net/tooltip/">Tooltip</a>    : null,
08  
09   // A CSS class to style the 'Remove' button.  The generated HTML will be a <span>, so it is
10   // assumed that you will use CSS to define a background image.
11   removeButtonClass   : "removeButton",
12  
13   // Hover text for the 'Remove' button
14   removeButtonTooltip : null,
15 });

5. Set the max number of input fields to be generated.

view source
1 $("#demo").addRemoveTextbox({
2   maxFields           : 5
3 });

Change log:

2016-09-02

  • Fixed validation of maxFields and startingNumber; updates to demo

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

source : jqueryscript.net

Related posts: