This time I will share jQuery Plugin and tutorial about jQuery Plugin To Dynamically Add More Form Fields – czMore, hope it will help you in programming stack.
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.
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.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<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.
3 |
<div class="recordset"> |
4 |
<input type="text" name="input 1" id="input 1"> |
5 |
<input type="text" name="input 2" id="input 2"> |
6 |
<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.
1 |
$("#czContainer").czMore(); |
4. Default plugin options and callbacks.
01 |
$("#czContainer").czMore({ |
13 |
countFieldPrefix: '_czMore_txtCount' |
5. Callback functions & event handlers.
01 |
$("#czContainer").czMore({ |
03 |
onLoad: function(index) { |
07 |
onAdd: function(index) { |
11 |
onDelete: function(id) { |
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.
