Clone Form Fields And Increment ID - jQuery cloneData.js

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.