Create Repeatable Groups Of Form Fields - jQuery Form Repeater

Create Repeatable Groups Of Form Fields - jQuery Form Repeater
File Size: 8.81 KB
Views Total: 11699
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.