jQuery Plugin To Dynamically Add More Form Fields - czMore

File Size: 13.3 KB
Views Total: 36837
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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">

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


4. Default plugin options and callbacks.


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


  onLoad: function(index) {
    // on load

  onAdd: function(index) {
    // on add

  onDelete: function(id) {
    // on delete



  • fixing bugs introduced with "use strict"

v1.6.0 (2019-07-14)

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


  • 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.