Create Repeatable Groups Of Form Fields - jQuery Form Repeater

The Form Element Repeater jQuery plugin allows the user to dynamically add and remove repeatable groups of form fields that are easy to style and customize.

Basic usage:

1. Create a group of form fields that will be repeatable. Available HTML data attributes;

• data-pattern-text: text pattern
• data-pattern-id: the ID of each each form field
• data-pattern-name: name pattern

<div class="example">
  <div class="r-group">
    <p>
      <label for="demo_0_0" data-pattern-text="Demo Name +=1:">Demo Name 1:</label>
      <input type="text" name="demo[0][name]" id="demo_0_name" data-pattern-name="demo[++][name]" data-pattern-id="demo_++_name" />
    </p>
    <p>
      <label for="demo_0_0" data-pattern-text="Demo Type +=1:">Demo Type 1:</label>
      <input type="text" name="demo[0][type]" id="demo_0_type" data-pattern-name="demo[++][type]" data-pattern-id="demo_++_type" />
    </p>
    <p>
      <!-- Add a remove button for the item. If one didn't exist, it would be added to overall group -->
      <button type="button" class="r-btnRemove">Remove -</button>
    </p>
  </div>
</div>

2. Create an 'Add' button next to the form fields.

<button type="button" class="r-btnAdd">Add +</button>

3. Include the necessar JavaScript files at the bottom of the web page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.form-repeater.js"></script>

4. Activate the form repeater plugin with default settings. Possible parameters:

• options: an object of possible plugin options.
• data: an array of data objects containing form fields to clone.

$('#example1').repeater(options, data);

5. You can also clone the form fields defined in the data array on init.

$('#example').repeater(options, [
  {
    "demo[0][name]":"test",
    "demo[0][type]":"test"
  },{
    "demo[1][name]":"test2",
    "demo[1][type]":"test2"
  }]
});

6. All possible options (with default values) to customize the form repeater.

$('#example').repeater({

  // default CSS selectors
  groupClass: 'r-group',
  btnAddClass: 'r-btnAdd',
  btnRemoveClass: 'r-btnRemove',

  // min/max amount of items
  minItems: 1,
  maxItems: 0,

  // the starting index of your array.
  startingIndex: 0,
  reindexOnDelete: true,

  // shows min items on load
  showMinItemsOnLoad: false,

  // append, prepend, insertAfterLast 
  repeatMode: 'insertAfterLast', 

  // 'slide' or 'fade'
  animation: null,

  // animation speed
  animationSpeed: 400,

  // easing name
  animationEasing: 'swing'
  
});

7. Callback functions you might find useful.

$('#example').repeater({

  beforeAdd: function($doppleganger) {
    return $doppleganger;
  },
  afterAdd: function($doppleganger) {},
  beforeDelete: function($elem) {},
  afterDelete: function() {}
  
});

---

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