jQuery Plugin To Dynamically Add More Form Fields - czMore

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">
    </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,
  // callback functions
  onLoad: null,
  onAdd: null,
  onDelete: null
  
}

Change log:

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.

  • Publication date: 09.01.2018
  • Source