Free Download Clone Form Fields And Increment ID – jQuery cloneData.js

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.

File Size:	10.2 KB
Views Total:	1320
Last Update:	8 months ago
Publish Date:	9 months ago
Official Website:	Go to website
License:	MIT

Demo Download

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 ...

7
  </div>

8
</div>

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({

02
 
03
  // container to hold the dulicated form fields

04
  mainContainerId: 'main-container',

05
 
06
  // Which you want to clone

07
  cloneContainer: 'container-item',

08
 
09
  // CSS lcass of remove button

10
  removeButtonClass: 'remove-item'

11
 
12
});

5. Determine the EXCLUDE class which can be used to exclude an element and its children.

1
$('#add-more').cloneData({

2
 
3
  excludeHTML: ".exclude"

4
 
5
});

6. Determine the min and max numbers of copies.

1
$('#add-more').cloneData({

2
 
3
  // 0 = unlimited

4
  maxLimit: 0, 

5
 
6
  // 0 = unlimited

7
  minLimit: 1

8
 
9
});

7. Determine whether to show an alert when the user tries to remove form fields.

1
$('#add-more').cloneData({

2
 
3
  removeConfirm: true, 

4
  removeConfirmMessage: 'Are you sure want to delete?'

5
 
6
});

8. Determine whether to clear the input values after duplicating. Default: true.

1
$('#add-more').cloneData({

2
 
3
  clearInputs: true

4
 
5
});

9. Config how to increment field ID & name.

1
$('#add-more').cloneData({

2
 
3
  counterIndex: 0,

4
  regexID: /^(.+?)([-d-]{1,})(.+)$/i,

5
  regexName: /(^.+?)([[d{1,}]]{1,})([.+]$)/i,

6
 
7
});

10. More configuration options with default values.

01
$('#add-more').cloneData({

02
 
03
  // empty elements with emptySelector

04
  emptySelector: ".empty",

05
 
06
  // CSS class appended to the duplicated form fields

07
  copyClass: "clone-div",

08
 
09
  // HTML to attach at the end of each copy

10
  append: '',

11
 
12
  // custom template

13
  template: null,

14
   
15
  // true = render/initialize one clone

16
  defaultRender: true, 

17
 
18
  // for select2 plugin

19
  select2InitIds: [],

20
 
21
  // for ckeditor plugin

22
  ckeditorIds: []

23
 
24
});

11. Callback functions.

01
$('#add-more').cloneData({

02
 
03
  init: function() {},

04
  complete: function() {},

05
  beforeRender: function() {},

06
  afterRender: function() {},

07
  beforeRemove: function() {},

08
  afterRemove: function() {}

09
 
10
});

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

How to use it:

Share this:

Related posts: