This time I will share jQuery Plugin and tutorial about Clone Form Fields And Increment ID – jQuery cloneData.js, hope it will help you in programming stack.
cloneData.js is an easy jQuery based form clone & removal plugin that makes it possible to duplicate multiple fields in an HTML form and increment field ID for users who want to enter more information.
How to use it:
1. Load the main script cloneData.js
after loading the latest jQuery library.
1 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
2 |
< script src = "/path/to/cloneData.js" ></ script > |
2. Wrap the form fields you want to duplicate into a container with an unique ID.
1 |
< div id = "main-container" > |
2 |
< div class = "container-item" > |
3 |
< label class = "control-label" for = "address_line_one_0" >Address</ label > |
4 |
< input type = "text" id = "address_line_one_0" name = "Address[0][address_line]" > |
5 |
< textarea name = "Address[0][desc]" id = "desc_0" ></ textarea > |
6 |
... More Form Fields Here ... |
3. Create Add & Remove buttons on the page.
1 |
< a href = "javascript:void(0)" class = "remove-item" >Remove</ a > |
2 |
< a id = "add-more" href = "javascript:;" >Add More Fields</ a > |
4. Initialize the plugin with several options.
01 |
$( '#add-more' ).cloneData({ |
04 |
mainContainerId: 'main-container' , |
07 |
cloneContainer: 'container-item' , |
10 |
removeButtonClass: 'remove-item' |
5. Determine the EXCLUDE class which can be used to exclude an element and its children.
1 |
$( '#add-more' ).cloneData({ |
3 |
excludeHTML: ".exclude" |
6. Determine the min and max numbers of copies.
1 |
$( '#add-more' ).cloneData({ |
7. Determine whether to show an alert when the user tries to remove form fields.
1 |
$( '#add-more' ).cloneData({ |
4 |
removeConfirmMessage: 'Are you sure want to delete?' |
8. Determine whether to clear the input values after duplicating. Default: true.
1 |
$( '#add-more' ).cloneData({ |
9. Config how to increment field ID & name.
1 |
$( '#add-more' ).cloneData({ |
4 |
regexID: /^(.+?)([-d-]{1,})(.+)$/i, |
5 |
regexName: /(^.+?)([[d{1,}]]{1,})([.+]$)/i, |
10. More configuration options with default values.
01 |
$( '#add-more' ).cloneData({ |
04 |
emptySelector: ".empty" , |
07 |
copyClass: "clone-div" , |
11. Callback functions.
01 |
$( '#add-more' ).cloneData({ |
04 |
complete: function () {}, |
05 |
beforeRender: function () {}, |
06 |
afterRender: function () {}, |
07 |
beforeRemove: function () {}, |
08 |
afterRemove: function () {} |
This awesome jQuery plugin is developed by rajneeshgautam. For more Advanced Usages, please check the demo page or visit the official website.