Clone Form Fields And Increment ID - jQuery cloneData.js
File Size: | 10.2 KB |
---|---|
Views Total: | 8231 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/cloneData.js"></script>
2. Wrap the form fields you want to duplicate into a container with an unique ID.
<div id="main-container"> <div class="container-item"> <label class="control-label" for="address_line_one_0">Address</label> <input type="text" id="address_line_one_0" name="Address[0][address_line]"> <textarea name="Address[0][desc]" id="desc_0"></textarea> ... More Form Fields Here ... </div> </div>
3. Create Add & Remove buttons on the page.
<a href="javascript:void(0)" class="remove-item">Remove</a> <a id="add-more" href="javascript:;">Add More Fields</a>
4. Initialize the plugin with several options.
$('#add-more').cloneData({ // container to hold the dulicated form fields mainContainerId: 'main-container', // Which you want to clone cloneContainer: 'container-item', // CSS lcass of remove button removeButtonClass: 'remove-item' });
5. Determine the EXCLUDE class which can be used to exclude an element and its children.
$('#add-more').cloneData({ excludeHTML: ".exclude" });
6. Determine the min and max numbers of copies.
$('#add-more').cloneData({ // 0 = unlimited maxLimit: 0, // 0 = unlimited minLimit: 1 });
7. Determine whether to show an alert when the user tries to remove form fields.
$('#add-more').cloneData({ removeConfirm: true, removeConfirmMessage: 'Are you sure want to delete?' });
8. Determine whether to clear the input values after duplicating. Default: true.
$('#add-more').cloneData({ clearInputs: true });
9. Config how to increment field ID & name.
$('#add-more').cloneData({ counterIndex: 0, regexID: /^(.+?)([-\d-]{1,})(.+)$/i, regexName: /(^.+?)([\[\d{1,}\]]{1,})(\[.+\]$)/i, });
10. More configuration options with default values.
$('#add-more').cloneData({ // empty elements with emptySelector emptySelector: ".empty", // CSS class appended to the duplicated form fields copyClass: "clone-div", // HTML to attach at the end of each copy append: '', // custom template template: null, // true = render/initialize one clone defaultRender: true, // for select2 plugin select2InitIds: [], // for ckeditor plugin ckeditorIds: [] });
11. Callback functions.
$('#add-more').cloneData({ init: function() {}, complete: function() {}, beforeRender: function() {}, afterRender: function() {}, beforeRemove: function() {}, afterRemove: function() {} });
This awesome jQuery plugin is developed by rajneeshgautam. For more Advanced Usages, please check the demo page or visit the official website.