Create Repeatable Form Groups - jQuery Repeater

Repeater is a jQuery plugin for creating repeatable form groups, which allows the user to duplicate and remove a repeatable group of fields in a form.

It is useful for situations, where you would like to let users create and manage their frequently used sets of data (ex. Frequent Flyer Number, Credit Card Number), or add new sets of data that they require repeatedly on other forms in the future.

How to use it:

1. Download and include the minified version of the repeater plugin after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.repeater.min.js"></script>

2. Create a repeatable form groups using the following data attributes:

• data-repeater-list: Used to rewrite the field names
• data-repeater-item: Place all repeatable form fields in this container
• data-repeater-delete: Delete button
• data-repeater-create: Duplicate button

<form action="#" class="repeater" enctype="multipart/form-data">
  <div data-repeater-list="group-a">
    <div data-repeater-item>
      <input type="text" name="text-input" value="A"/>
      <textarea name="textarea-input">A</textarea>
      <input type="radio" name="radio-input" value="A" checked/>
      <input type="radio" name="radio-input" value="B"/>
      <input type="checkbox" name="checkbox-input" value="A" checked/>
      <input type="checkbox" name="checkbox-input" value="B"/>
      <select name="select-input">
        <option value="A" selected>A</option>
        <option value="B">B</option>
      </select>
      <select name="multiple-select-input" multiple>
        <option value="A" selected>A</option>
        <option value="B" selected>B</option>
      </select>
      <input data-repeater-delete type="button" value="Delete"/>
    </div>
  </div>
  <input data-repeater-create type="button" value="Add"/>
</form>

3. Initialize the plugin on the form:

$('.repeater').repeater({
  // options and callbacks here
});

4. The plugin also supports nested form fields:

<form action="#" class="outer-repeater">
  <div data-repeater-list="outer-group" class="outer">
    <div data-repeater-item class="outer">
      <input type="text" name="text-input" value="A" class="outer"/>
      <input data-repeater-delete type="button" value="Delete" class="outer"/>
      <div class="inner-repeater">
        <div data-repeater-list="inner-group" class="inner">
          <div data-repeater-item class="inner">
            <input type="text" name="inner-text-input" value="B" class="inner"/>
            <input data-repeater-delete type="button" value="Delete" class="inner"/>
          </div>
        </div>
        <input data-repeater-create type="button" value="Add" class="inner"/>
      </div>
    </div>
  </div>
  <input data-repeater-create type="button" value="Add" class="outer"/>
</form>

$('.outer-repeater').repeater({
  repeaters: [{
    selector: '.inner-repeater',
  }]
});

5. Set the default values of duplicated fields:

$('.repeater').repeater({
  defaultValues: {
    'textarea-input': 'foo',
    'text-input': 'bar',
    'select-input': 'B',
    'checkbox-input': ['A', 'B'],
    'radio-input': 'B'
  },
});

6. Determines whether to allow deletion of the first group within the form. Default: 'false'.

$('.repeater').repeater({
  isFirstItemUndeletable: true,
});

7. Determines whether to generate an empty form. Default: 'false'.

<form action="#" class="repeater" enctype="multipart/form-data">
  <div data-repeater-list="group-a">
    <div data-repeater-item style="display:none">
      <input type="text" name="text-input" value="A"/>
      <textarea name="textarea-input">A</textarea>
      <input type="radio" name="radio-input" value="A" checked/>
      <input type="radio" name="radio-input" value="B"/>
      <input type="checkbox" name="checkbox-input" value="A" checked/>
      <input type="checkbox" name="checkbox-input" value="B"/>
      <select name="select-input">
        <option value="A" selected>A</option>
        <option value="B">B</option>
      </select>
      <select name="multiple-select-input" multiple>
        <option value="A" selected>A</option>
        <option value="B" selected>B</option>
      </select>
      <input data-repeater-delete type="button" value="Delete"/>
    </div>
  </div>
  <input data-repeater-create type="button" value="Add"/>
</form>

$('.outer-repeater').repeater({
  initEmpty: true,
});

8. Callback functions.

$('.outer-repeater').repeater({
  show: function () {
    $(this).slideDown();
  },
  hide: function (deleteElement) {
    if(confirm('Are you sure you want to delete this element?')) {
      $(this).slideUp(deleteElement);
    }
  },
  ready: function (setIndexes) {
  }
});

9. Get the values of the form fields.

$('.repeater').repeaterVal();

---

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