Press "Enter" to skip to content

Iterable Form Fields With Add/Remove jQuery Repeater Plugin

jQuery Repeater is a simple yet fully customizable plugin for iterating single or multiple (nested) form fields with add/remove capabilities. It can be used to create a dynamic form for those who have to enter more information in additional form fields.

jquery repeatable form fields, jquery repeater control example, jquery repeater example, javascript duplicate form fields, form repeater, form repeater jquery validation

Templates

The iterator uses the first element “Data iterator” as a template for the added elements.

Rewritten name attributes

Iterator rewrites name attributes to avoid collisions within the same form. (where name attributes will be repeated). In the example below, the name attributes group-a [0] [text-input] and group-a [1] [text-input] will be renamed.

Checkbox entries and multi-select entries will have an additional [] appended. So for example, a checkbox with the name foo will be assigned to group-a[0][foo][].

Names are re-indexed if an item is added or deleted.

How to make use of it:

1. Load the primary script jquery.repeater.min.js after jQuery library.

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

2. Add the data-repeater-item attribute to the repeatable form fields and outline the bottom of rewritten identify attributes within the data-repeater-list attribute.

<form class="example">
  <div data-repeater-list="jquery-script-code">
    <div data-repeater-item>
      <input type="text" name="text-input" value="jQuery" />
    </div>
    <div data-repeater-item>
      <input type="text" name="text-input" value="Script-code" />
    </div>
  </div>
</form>

3. Add Delete and Duplicate buttons to the form.

<form class="example">
  <div data-repeater-list="jquery-script-code">
    <div data-repeater-item>
      <input type="text" name="text-input" value="jQuery" />
      <input data-repeater-delete type="button" value="Delete" />
    </div>
    <div data-repeater-item>
      <input type="text" name="text-input" value="Script-code" />
      <input data-repeater-delete type="button" value="Delete" />
    </div>
  </div>
  <input data-repeater-create type="button" value="Add"/>
</form>

4. Initialize the plugin and achieved.

$('.example').repeater({
  // options here
})

5. Nested form fields are supported as properly.

<form class="example">
  <div data-repeater-list="jquery-script">
    <div data-repeater-item>
      <input type="text" name="text-input" value="jQuery" />
      <input data-repeater-delete type="button" value="Delete" />
      <div class="inner-repeater">
        <div data-repeater-list="another-repeater">
          <div data-repeater-item>
            <input type="text" name="inner-text-input" value="Script-code" />
            <input data-repeater-delete type="button" value="Delete" />
          </div>
        </div>
        <input data-repeater-create type="button" value="Add"/>
      </div>
    </div>
  </div>
  <input data-repeater-create type="button" value="Add"/>
</form>

6. More configs & callbacks.

$('.example').repeater({

  // start with an empty list of repeaters. Set your first (and only)
  // "data-repeater-item" with style="display:none;" and pass the
  // following configuration flag
  initEmpty: true,

  // "defaultValues" sets the values of added items.  The keys of
  // defaultValues refer to the value of the input's name attribute.
  // If a default value is not specified for an input, then it will
  // have its value cleared.
  defaultValues: {
    'text-input': 'foo'
  },

  // Removes the delete button from the first list item
  isFirstItemUndeletable: false,

  // "show" is called just after an item is added.  The item is hidden
  // at this point.  If a show callback is not given the item will
  // have $(this).show() called on it.
  show: function () {
    $(this).slideDown();
  },

  // "hide" is called when a user clicks on a data-repeater-delete
  // element.  The item is still visible.  "hide" is passed a function
  // as its first argument which will properly remove the item.
  // "hide" allows for a confirmation step, to send a delete request
  // to the server, etc.  If a hide callback is not given the item
  // will be deleted.
  hide: function (deleteElement) {
    if(confirm('Are you sure you want to delete this element?')) {
      $(this).slideUp(deleteElement);
    }
  },

  // You can use this if you need to manually re-index the list
  // for example if you are using a drag and drop library to reorder
  // list items.
  ready: function (setIndexes) {
    $dragAndDrop.on('drop', setIndexes);
  },

})

Repeatable Form Fields With Add/Remove, jquery repeater Plugin/Github, jquery repeater get index


See Demo And Download

Official Website(blpraveen): Click Here

This superior jQuery/javascript plugin is developed by blpraveen. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *