This time I will share jQuery Plugin and tutorial about Add/Remove Form Fields Dynamically With jQuery – cloner, hope it will help you in programming stack.
A lightweight, flexible form cloner plugin which enables the user to dynamically add/remove/clone form fields and/or form groups in an HTML form.
How to use it:
1. Install the jQuery cloner via NPM or directly download the plugin and then include the JavaScript file jquery.cloner.min.js after jQuery library.
2 |
$ npm install jquery-cloner --save |
1 |
<script src="/path/to/cdn/jquery.slim.min.js"></script> |
2 |
<script src="dist/jquery.cloner.min.js"></script> |
2. Initialize the plugin by adding the data-toggle=”cloner” attribute to the clonable form block.
1 |
<div class="clonable-block" data-toggle="cloner"> |
3. Insert any form fields to be clonable to the form block. That’s it. Possible CSS helpers:
- clonable: CSS selector for the clonable form field
- clonable-decrement-*: decrements values inside the form field
- clonable-increment-*: increments values inside the form field
- clonable-button-add: CSS selector for the Add button
1 |
<div class="clonable-block" data-toggle="cloner"> |
2 |
<div class="clonable" data-ss="1"> |
3 |
<label for="" class="clonable-increment-html">1 2</label> |
4 |
<input id="person_1" class="clonable-decrement-value clonable-increment-placeholder" type="text" name="person[0]" placeholder="person[0][name][1]" value="5 4"> |
6 |
<button class="clonable-button-add" type="button">Add person</button> |
4. You can also initialize the plugin via JavaScript:
2 |
$('#clonable-block').cloner(); |
5. All possible plugin options:
01 |
$('#clonable-block').cloner({ |
02 |
clonableContainer: '.clonable-block', |
03 |
clonable: '.clonable', |
04 |
addButton: '.clonable-button-add', |
05 |
closeButton: '.clonable-button-close', |
06 |
focusableElement: ':input:visible:enabled:first', |
08 |
clearValueOnClone: true, |
09 |
removeNestedClonablesOnClone: true, |
10 |
limitCloneNumbers: true, |
14 |
cloneName: 'clonable-clone', |
15 |
sourceName: 'clonable-source', |
17 |
clonableCloneNumberDecrement: 'clonable-clone-number-decrement', |
19 |
incrementName: 'clonable-increment', |
20 |
decrementName: 'clonable-decrement', |
6. Or pass the options via data attribute:
1 |
<div class="clonable-block" |
3 |
data-options='{"clearValueOnClone":false}'> |
7. Callback functions which will be fired before/after cloning.
1 |
$('#clonable-block').cloner({ |
2 |
beforeToggle: function (clone, index, self) {}, |
3 |
afterToggle: function (clone, index, self) {} |
This awesome jQuery plugin is developed by lienoil. For more Advanced Usages, please check the demo page or visit the official website.
