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="jquery.czMore-latest.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">
      <div class="fieldRow clearfix">
        <div class="col-md-5">
          <div id="div_id_stock_1_service" class="form-group">
            <label for="id_stock_1_product" class="control-label  requiredField"> Product<span class="asteriskField">*</span> </label>
            <div class="controls ">
              <input type="text" name="stock_1_product" id="id_stock_1_product" class="textinput form-control" />
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div id="div_id_stock_1_unit" class="form-group">
            <label for="id_stock_1_unit" class="control-label  requiredField"> Unit<span class="asteriskField">*</span> </label>
            <div class="controls ">
              <select class="select form-control" id="id_stock_1_unit" name="stock_1_unit">
                <option value="" selected="selected">---------</option>
                <option value="1">1/2liter</option>
              </select>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div id="div_id_stock_1_quantity" class="form-group">
            <label for="id_stock_1_quantity" class="control-label  requiredField"> Quantity<span class="asteriskField">*</span> </label>
            <div class="controls ">
              <input class="numberinput form-control" id="id_stock_1_quantity" name="stock_1_quantity" step="0.01" type="number" />
            </div>
          </div>
        </div>
      </div>
    </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: 50, 

  // 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:

2025-09-03

• Change fields index to zero

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 yatabani. For more Advanced Usages, please check the demo page or visit the official website.