Duplicate Form Elements With Add/Remove Capabilities - isiaFormRepeater

File Size: 72.2 KB
Views Total: 4167
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Duplicate Form Elements With Add/Remove Capabilities - isiaFormRepeater

Yet another jQuery plugin for repeatable form elements that allow the end user to duplicate groups of form controls with add/remove capabilities.

How to use it:

1. Insert the core stylesheet isia-form-repeater.min.css into the header of the html page.

<link rel="stylesheet" href="css/isia-form-repeater.min.css">

2. Wrap a group of form elements you want to duplicate in a DIV container with the CSS class repeat-items. Note that each form field must have an unique ID as follows.

  • data-field-id: field ID
  • data-items-index-array: index array
<div class="isiaFormRepeater repeat-section" 
  <div class="repeat-items">
    <div class="repeat-item" data-field-index="1">
        <input type="text" class="repeat-el" id="example_field_id[test_sub1][1]" name="example_field_id[test_sub1][1]">
        <input type="email" class="repeat-el" id="example_field_id[test_sub2][1]" name="example_field_id[test_sub2][1]">
    ...More Repeatable Elements Here...

3. Put jQuery library and the isiaFormRepeater plugin's script isia-form-repeater.min.js at the bottom of the html page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/isia-form-repeater.min.js"></script>

4. Initialize the plugin and done.


5. Customize the add/remove buttons.

  addButton: 'Add Button Here',
  removeButton: 'Remove Button Here'

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