Duplicate Input Fields With Add/Remove Buttons - jQuery repeatable.js

Duplicate Input Fields With Add/Remove Buttons - jQuery repeatable.js

The repeatable.js jQuery plugin allows you to create groups of form input fields which can be dynamically added and removed as needed.

1. Insert the 'repeatable' container and 'Add New' button into your html form as these:

<form>
  <fieldset class="todos_labels">
    <div class="repeatable"></div>
    <input type="button" value="Add" class="add">
  </fieldset>
</form>

2. Create the field group template.

<script type="text/template" id="todos_labels">
  <div class="field-group">
    <label for="task_{?}">Task to do</label>
    <input type="text" name="todos_labels[{?}][task]" value="{task}" id="task_{?}">
    <label for="duedate_{?}">Due date</label>
    <input type="text" name="todos_labels[{?}][duedate]" value="{duedate}" id="duedate_{?}">
    <input type="button" class="delete" value="Remove">
  </div>
</script>

3. Insert jQuery JavaScript library and the JavaScript file jquery.repeatable.js into the page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.repeatable.js"></script>

4. Initialize the plugin and done.

$(".todos_labels .repeatable").repeatable({
  addTrigger: ".todos_labels .add",
  deleteTrigger: ".todos_labels .delete",
  template: "#todos_labels"
});

5. Possible configuration options with default values.

$(".todos_labels .repeatable").repeatable({
  addTrigger: ".add",
  deleteTrigger: ".delete",
  max: null,
  min: 0,
  template: null,
  itemContainer: ".field-group"
});

6. Callback functions available.

$(".todos_labels .repeatable").repeatable({
  beforeAdd: function () {},
  afterAdd: function () {},
  beforeDelete: function () {},
  afterDelete: function () {}
});

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

  • Publication date: 14.11.2017
  • Source