jQuery Plugin To Dynamically Add More Form Fields - czMore

czMore is an easy-to-use jQuery plugin that allows to dynamically duplicate and add/remove groups of fields from a specific form as needed.

See also:

• jQuery Plugin For Dynamic Form Field Generator - DuplicateElement
• Dynamic Form Element Creation And Deletion Plugin - Addel
• jQuery Plugin To Duplicate Form Groups - addMore
• jQuery Plugin To Duplicate and Remove Form Fieldsets - Multifield
• Dynamically Add / Remove Html Elements with jQuery Duplicate Plugin

How to use it:

1. Load the latest version of jQuery library and the jQuery czMore plugin's script at the end of your html document.

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

2. Create the first group of form fields you want to duplicate. The form fields could be any types of form elements such as inputs, selects, checkboxes, etc.

<div id="czContainer">
  <div id="first">
    <div class="recordset">
      <input type="text" name="input 1" id="input 1">
      <input type="text" name="input 2" id="input 2">
      <input type="text" name="input 3" id="input 3">
    </div>
  </div>
</div>

3. Just initialize the plugin by call the function on the top container and we're done.

$("#czContainer").czMore();

4. Default plugin options and callbacks.

$("#czContainer").czMore({

  // maximum number of form fields allowed
  max: 5, 

  // minimum number of form fields allowed
  min: 0,

  // uses your own CSS styles
  styleOverride: false,

  // change the prefix name of the text field
  countFieldPrefix: '_czMore_txtCount'
  
}

5. Callback functions & event handlers.

$("#czContainer").czMore({

  onLoad: function(index) {
    // on load
  },

  onAdd: function(index) {
    // on add
  },

  onDelete: function(id) {
    // on delete
  }
  
}

Changelog:

2019-07-15

• fixing bugs introduced with "use strict"

v1.6.0 (2019-07-14)

• Added new option: "max"
• Added new Option "countFieldPrefix"

2018-01-09

• Make compatible with latest jquery version & add styling functionailty

---

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