jquery.repeatable.js

A jQuery plugin that allows you to easily create repeatable groups of form fields.

Getting started

Markup

At a bare minimum, the html form should contain a container for which the repeatable items will populate and a button that when clicked, tells jquery.repeatable to add another item. The classes you use can be different than the example below, but make sure you register any differences when you call the plugin. See config below.

<form>
  <div class="repeatable-container"></div>
  <input type="button" value="Add Person" class="add" />
  <input type="submit" value="Submit" />
</form>

Field group template

The field group template contains html for the group of form fields that will be repeatable. Here are a few things to keep in mind:

The form fields need to be within a container element.
The form fields should contain the attribute data-track-index (see example below), so jquery.repeatable can run checks to avoid clashes from creating duplicate array index key names.
Include the symbol {?} when you need a unique value. You must at least include this symbol in the name attribute of your form fields to ensure they are all unique.
If you want users to be able to delete items, include a delete button in the template.

<script type="text/template" id="people">
<div class="field-group">
  <label for="firstname_{?}">First name</label>
  <input data-track-index="{?}" type="text" name="firstname_{?}" value="" id="firstname_{?}" />

  <label for="lastname_{?}">First name</label>
  <input data-track-index="{?}" type="text" name="lastname_{?}" value="" id="lastname_{?}" />

  <input type="button" class="delete" value="X" />
</div>
</script>

JavaScript

The following JavaScript can be used in conjunction with the form and template shown above.

$(function() {
  $("form .repeatable-container").repeatable({
    template: "#people"
  });
});

When a user clicks on the .add button, the script will render a new .field-group within the .repeatable-container. Each {?} will be replaced with a unique value so that each field is unique in the scope of the form. If a user clicks on a .delete button within a group, that group will be removed from the form.

Config