This time I will share jQuery Plugin and tutorial about Dynamically Create HTML Form Fields – jQuery Dynamic Forms, hope it will help you in programming stack.
Yet another dynamic form creation plugin which allows to dynamically add and remove form fields (form groups) for those who want to enter more information in an HTML form.
How to use it:
1. Insert the latest version of jQuery JavaScript library and the JavaScript file dynamic-form.js into the page.
2 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
3 |
crossorigin="anonymous"> |
5 |
<script src="js/dynamic-form.js"></script> |
2. Insert add/remove buttons to the form groups you want to duplicate.
01 |
<div id="dynamic_form"> |
02 |
<div class="form-control"> |
03 |
<input type="text" name="p_name" id="p_name" placeholder="Enter Product Name"> |
05 |
<div class="form-control"> |
06 |
<input type="text" name="quantity" id="quantity" placeholder="Enter Product Quantity"> |
08 |
<div class="form-control"> |
09 |
<textarea name="remarks" placeholder="Enter Remarks" id="remarks"></textarea> |
11 |
<div class="button-group"> |
12 |
<a href="javascript:void(0)" class="btn btn-primary" id="plus">Add More</a> |
13 |
<a href="javascript:void(0)" class="btn btn-danger" id="minus">Remove</a> |
3. Attach the form duplication functionality to the form group. Possible parameters:
- selectedTarget: target form controls
- plusSelector: CSS selector of Add button
- minusSelector: CSS selector of Remove button
- options: options object
2 |
var dynamic_form = $("#dynamic_form").dynamicForm("#dynamic_form","#plus", "#minus", { |
4. Full plugin options.
01 |
var dynamic_form = $("#dynamic_form").dynamicForm("#dynamic_form","#plus", "#minus", { |
11 |
normalizeFullForm: false, |
This awesome jQuery plugin is developed by Hemant411. For more Advanced Usages, please check the demo page or visit the official website.
