Dynamically Create HTML Form Fields - jQuery Dynamic Forms

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.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="js/dynamic-form.js"></script>

2. Insert add/remove buttons to the form groups you want to duplicate.

<div id="dynamic_form">
  <div class="form-control">
    <input type="text" name="p_name" id="p_name" placeholder="Enter Product Name">
  </div>
  <div class="form-control">
    <input type="text" name="quantity" id="quantity" placeholder="Enter Product Quantity">
  </div>
  <div class="form-control">
    <textarea name="remarks" placeholder="Enter Remarks" id="remarks"></textarea>
  </div>
  <div class="button-group">
    <a href="javascript:void(0)" class="btn btn-primary" id="plus">Add More</a>
    <a href="javascript:void(0)" class="btn btn-danger" id="minus">Remove</a>
  </div>
</div>

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

// dynamicForm(selectedTarget, plusSelector, minusSelector, options)
var dynamic_form =  $("#dynamic_form").dynamicForm("#dynamic_form","#plus", "#minus", {
    // options here
});

4. Full plugin options.

var dynamic_form =  $("#dynamic_form").dynamicForm("#dynamic_form","#plus", "#minus", {

    // the maximum number of form fields
    limit: 10,

    // prefix
    formPrefix:

    // normalize all fields
    // ideal for server side dulication
    normalizeFullForm: false,

    // color effects
    createColor: '',
    removeColor： '',
    duration: 3000,

    // JSON data which will prefill the form
    data: {}

});

---

This awesome jQuery plugin is developed by Hemant411. For more Advanced Usages, please check the demo page or visit the official website.