jQuery Plugin To Duplicate and Remove Form Fieldsets - Multifield

Multifield is a lightweight jQuery plugin that allows you to dynamically duplicate and remove form groups with add / remove buttons.

See also:

• jQuery Plugin For Dynamic form Field generator - DuplicateElement

Basic usage:

1. Include jQuery library and the jQuery multifield plugin on the html page.

<script src="jquery.min.js"></script>
<script src="jquery.multifield.min.js"></script>

2. Wrap the form elements you want to duplicate with add / remove buttons into a container. You can pass the plugin options via data-mfield-options attribute on top element as follow.

<div id="example-1" class="content" 
     data-mfield-options='{"section": ".group","btnAdd":"#btnAdd","btnRemove":".btnRemove"}'>
  <div class="row">
    <div class="col-md-12">
      <button type="button" id="btnAdd" class="btn btn-primary">Add section</button>
    </div>
  </div>
  <div class="row group">
    <div class="col-md-2">
      <input class="form-control" type="text">
    </div>
    <div class="col-md-2">
      <input class="form-control" type="text">
    </div>
    <div class="col-md-4">
      <textarea></textarea>
    </div>
    <div class="col-md-3">
      <button type="button" class="btn btn-danger btnRemove">Remove</button>
    </div>
  </div>
</div>

3. Call the plugin and we're done.

$('#example-1').multifield();

4. You can also pass the options via option object during initialization.

$('#example-1').multifield({

  // form group you want to duplicate
  section: '.group',

  // add button
  btnAdd:'#btnAdd',

  // remove button
  btnRemove:'.btnRemove',

  // maximum number of form groups to duplicate
  max: 3,

  // localization
  locale:'default'

});

Change log:

2017-07-19

• JS update

v2.0.0 (2016-09-22)

• Fix localization issues

---

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