Dynamic Creation And Removal Of Form Fields - nested-form

Just another jQuery plugin to duplicate form fields that allow the users to dynamically insert more fields into an HTML form when needed.

How to use it:

1. To get started, include the jquery-nested-form.js script after jQuery.

<script src="jquery.min.js"></script>
<script src="jquery-nested-form.js"></script>

2. Insert an 'Add' button to the form group to be duplicated.

<div id="container">
  <div class="nested-form">
    <p><input type="text" name="basic_attributes[0][text]" id="basic_attributes_0_text"></p>
    <p><textarea name="basic_attributes[0][textarea]" id="basic_attributes_0_textarea"></textarea></p>
    <p>
      <select name="basic_attributes[0][select]" id="basic_attributes_0_select">
        <option value=""></option>
        <option value="opt1">opt1</option>
        <option value="opt2" selected="selected">opt2</option>
      </select>
    </p>
    <p>
      <input type="hidden" value="" name="basic_attributes[0][radio]">
      <input type="radio" value="1" name="basic_attributes[0][radio]" id="basic_attributes_0_radio_1">
      <label for="basic_attributes_0_radio_1">radio1</label>
      <input type="radio" value="2" name="basic_attributes[0][radio]" id="basic_attributes_0_radio_2" checked="checked">
      <label for="basic_attributes_0_radio_2">radio2</label>
    </p>
    <p>
      <input type="hidden" value="0" name="basic_attributes[0][checkbox]">
      <input type="checkbox" value="1" name="basic_attributes[0][checkbox]" id="basic_attributes_0_checkbox" checked="checked">
      <label for="basic_attributes_0_checkbox">Checkbox</label>
    </p>
    <input type="hidden" value="999" name="basic_attributes[0][id]" id="basic_attributes_0_id">
  </div>
</div>
<input type="button" value="Add" id="add">

3. Call the plugin on the top container and done.

$('#container').nestedForm({
  forms: '.nested-form',
  adder: '#add'
});

4. It also allows removal of form fields with a 'Remove' button.

<div id="removable_container">
  <div class="nested-form">
    <p>
      <input type="text" name="removable_attributes[0][text]" id="removable_attributes_0_text">
    </p>
  </div>
  <div class="nested-form">
    <p>
      <input type="text" name="removable_attributes[1][text]" id="removable_attributes_1_text">
      <input type="hidden" name="removable_attributes[1][_destroy]" id="removable_attributes_1__destroy">
      <input type="button" value="Remove" class="removable-remove">
    </p>
  </div>
</div>
<input type="button" value="Add" id="removable_add">

$('#removable_container').nestedForm({
  forms: '.nested-form',
  adder: '#removable_add',
  remover: '.removable-remove'
});

5. Customize the start index.

<div id="index_container">
  <div class="nested-form">
    <p>
      <input type="text" name="index_attributes[10][text]" id="index_attributes_10_text">
    </p>
  </div>
</div>
<input type="button" value="Add" id="index_add">

$('#index_container').nestedForm({
  forms: '.nested-form',
  adder: '#index_add',
  increment: 3,
  startIndex: 10,
  maxIndex: 15,
  onBuildForm: function($elem, index) {
    $elem.find('input[type="text"]').val(index);
  }
});

6. Multiple associations.

<div id="multiple_container">
  <div class="nested-form">
    <p>
      <input type="text" name="some_attributes[0][text]" id="some_attributes_0_text">
    </p>
    <p>
      <input type="text" name="other_attributes[0][text]" id="other_attributes_0_text">
    </p>
  </div>
</div>
<input type="button" value="Add" id="multiple_add">

$('#multiple_container').nestedForm({
  forms: '.nested-form',
  adder: '#multiple_add',
  associations: ['some', 'other'],
  onBuildForm: function($elem) {
    showID($elem);
  }
});

7. Create a complex reapeatable form.

<div id="complex_container">
  <div class="nested-form">
    <input type="text" name="item[base_attributes][0][text]" id="item_base_attributes_0_text" style="width: 300px;">
    <div class="deep-container">
      <div class="deep-nested-form">
        <input type="text" name="item[base_attributes][0][deep_attributes][0][text1]" id="item_base_attributes_0_deep_attributes_0_text1" style="width: 400px;">
        <input type="text" name="item[base_attributes][0][deep_attributes][0][text2]" id="item_base_attributes_0_deep_attributes_0_text2" style="width: 400px;">
      </div>
    </div>
    <input type="button" value="Add" class="deep-add">
  </div>
</div>
<input type="button" value="Add" id="complex_add">

$('#complex_container').nestedForm({
  forms: '.nested-form',
  adder: '#complex_add',
  associations: ['base'],
  cloneEvents: false,
  onBuildForm: function($elem) {
    initDeepNestedForm($elem.find('.deep-container'));
    showID($elem);
  }
});

initDeepNestedForm($('#complex_container .deep-container'));

function showID($elem) {
  $elem.find('input[type="text"]').each(function(i, input) {
    $(input).val($(input).attr('id'));
  });
}

function initDeepNestedForm($container) {
  $container.nestedForm({
    forms: $container.find('.deep-nested-form'),
    adder: $container.siblings('.deep-add'),
    associations: ['deep'],
    cloneEvents: false,
    onBuildForm: function($elem) {
      showID($elem);
    }
  });
}

8. All default configuration options.

{
  forms: '',
  adder: '',
  remover: null,
  associations: '',
  postfixes: '_attributes',
  increment: 1,
  startIndex: 0,
  max: null,
  tags: ['input', 'textarea', 'select', 'label'],
  attributes: ['id', 'name', 'for'],
  cloneEvents: true,
}

9. Callback functions available.

{
  afterInitialize: null,
  onBuildTemplate: null,
  onBuildForm: null,
  beforeAddForm: null,
  afterAddForm: null,
  beforeRemoveForm: null,
  afterRemoveForm: null
}

Changelog:

v0.6.0 (2020-07-12)

• Support multi-level nested form by nestedForm option.
• Remove onBuildTemplate callback. Use onBuildForm instead.
• Change maxIndex to max. max means the number of forms.
• Use latest form html as template. Don't use cached html at the time of initialization.
• Refactoring.

2019-12-02

• Updated

---

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