While executing Forms, we in some cases need to add dynamic frame input fields to build client encounter. So in this instructional exercise you will figure out how to include and expel shape input fields powerfully utilizing jQuery. You will likewise figure out how to deal with powerfully included fields esteem spares in database utilizing PHP. The instructional exercise canvassed in simple strides with live Demo and finish download content. 
So how about we begin the coding. We will have following record structure for this instructional exercise
      
created file this

index.php
add_fields.js
form_post.php

Step by step code Here

Step 1:- Create Form with Add Field Buuton
In index.php, we will Form HTML add field catch to include fields progressively

<form action=“post_form.php” method=“post”>
<div class=“field_wrapper”>
<div>
<input type=“text” name=“input_field[]” value=“”/>
<a href=“javascript:void(0);” class=“add_input_button” title=“Add field”><img src=“add-icon.png”/></a>
</div>
</div>
<input type=“submit” name=“save” value=“Submit”/>
</form>

Steps 2: JavaScript to Form Input Fields Dynamically

In add_fields.js , we will deal with usefulness to include input fields powerfully catch click. Additionally handle usefulness to evacuate included info fields.

$(document).ready(function(){
var max_fields = 10;
var add_input_button = $(‘.add_input_button’);
var field_wrapper = $(‘.field_wrapper’);
var new_field_html = ‘<div><input type=”text” name=”input_field[]” value=””/><a href=”javascript:void(0);” class=”remove_input_button” title=”Remove field”><img src=”remove-icon.png”/></a></div>’;
var input_count = 1;
// Add button dynamically
$(add_input_button).click(function(){
if(input_count < max_fields){
input_count++;
$(field_wrapper).append(new_field_html);
}
});
// Remove dynamically added button
$(field_wrapper).on(‘click’, ‘.remove_input_button’, function(e){
e.preventDefault();
$(this).parent(‘div’).remove();
input_count–;
});
});
$(document).ready(function(){
var max_fields = 10;
var add_input_button = $(‘.add_input_button’);
var field_wrapper = $(‘.field_wrapper’);
var new_field_html = ‘<div><input type=”text” name=”input_field[]” value=””/><a href=”javascript:void(0);” class=”remove_input_button” title=”Remove field”><img src=”remove-icon.png”/></a></div>’;
var input_count = 1;
// Add button dynamically
$(add_input_button).click(function(){
if(input_count < max_fields){
input_count++;
$(field_wrapper).append(new_field_html);
}
});
// Remove dynamically added button
$(field_wrapper).on(‘click’, ‘.remove_input_button’, function(e){
e.preventDefault();
$(this).parent(‘div’).remove();
input_count–;
});
});


Steps 3: Handle From Submit Value At Server End

Presently at last in form_post.php, we will deal with frame submit input field esteem utilizing PHP. You can add usefulness to spare Form esteems to database.

<?php
if(isset($_REQUEST[‘input_field’])){
print ‘<pre>’;
print_r($_REQUEST[‘input_field’]);
print ‘</pre>’;
}
?>


DEMO  DOWNLOAD  

And please comment video created me