This time I will share jQuery Plugin and tutorial about Dynamic Creation And Removal Of Form Fields – nested-form, hope it will help you in programming stack.
Just another jQuery plugin to duplicate form fields that allow the users to dynamically insert more fields into an HTML form when needed.
How to use it:
1. To get started, include the jquery-nested-form.js script after jQuery.
1 |
<script src="jquery.min.js"></script> |
2 |
<script src="jquery-nested-form.js"></script> |
2. Insert an ‘Add’ button to the form group to be duplicated.
02 |
<div class="nested-form"> |
03 |
<p><input type="text" name="basic_attributes[0][text]" id="basic_attributes_0_text"></p> |
04 |
<p><textarea name="basic_attributes[0][textarea]" id="basic_attributes_0_textarea"></textarea></p> |
06 |
<select name="basic_attributes[0][select]" id="basic_attributes_0_select"> |
07 |
<option value=""></option> |
08 |
<option value="opt1">opt1</option> |
09 |
<option value="opt2" selected="selected">opt2</option> |
13 |
<input type="hidden" value="" name="basic_attributes[0][radio]"> |
14 |
<input type="radio" value="1" name="basic_attributes[0][radio]" id="basic_attributes_0_radio_1"> |
15 |
<label for="basic_attributes_0_radio_1">radio1</label> |
16 |
<input type="radio" value="2" name="basic_attributes[0][radio]" id="basic_attributes_0_radio_2" checked="checked"> |
17 |
<label for="basic_attributes_0_radio_2">radio2</label> |
20 |
<input type="hidden" value="0" name="basic_attributes[0][checkbox]"> |
21 |
<input type="checkbox" value="1" name="basic_attributes[0][checkbox]" id="basic_attributes_0_checkbox" checked="checked"> |
22 |
<label for="basic_attributes_0_checkbox">Checkbox</label> |
24 |
<input type="hidden" value="999" name="basic_attributes[0][id]" id="basic_attributes_0_id"> |
27 |
<input type="button" value="Add" id="add"> |
3. Call the plugin on the top container and done.
1 |
$('#container').nestedForm({ |
4. It also allows removal of form fields with a ‘Remove’ button.
01 |
<div id="removable_container"> |
02 |
<div class="nested-form"> |
04 |
<input type="text" name="removable_attributes[0][text]" id="removable_attributes_0_text"> |
07 |
<div class="nested-form"> |
09 |
<input type="text" name="removable_attributes[1][text]" id="removable_attributes_1_text"> |
10 |
<input type="hidden" name="removable_attributes[1][_destroy]" id="removable_attributes_1__destroy"> |
11 |
<input type="button" value="Remove" class="removable-remove"> |
15 |
<input type="button" value="Add" id="removable_add"> |
1 |
$('#removable_container').nestedForm({ |
3 |
adder: '#removable_add', |
4 |
remover: '.removable-remove' |
5. Customize the start index.
1 |
<div id="index_container"> |
2 |
<div class="nested-form"> |
4 |
<input type="text" name="index_attributes[10][text]" id="index_attributes_10_text"> |
8 |
<input type="button" value="Add" id="index_add"> |
01 |
$('#index_container').nestedForm({ |
02 |
forms: '.nested-form', |
