Sometimes you need to adding dynamic fields in a form as per client requirement. The dynamic field is new input field which will be created whenever we click + button in our script. Here, in this tutorial, I have provided an easy way to add dynamic field using JQuery. I have created a script where you can add and remove multiple fields.
![](http://findnerd.s3.amazonaws.com/imagedata/8898/8898.png)
Let's suppose, you want to add 5 field dynamically. For that put maxfield variable value equal to 5.
You can also add more fields as per need. Lets see how can we do it.
JavaScript code:
First step is to include the jQuery library.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var maxField = 5;
var addButton = $('.add_button');
var wrapper = $('.field_wrapper');
var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field">-</a></div>';
var x = 1;
$(addButton).click(function(){
if(x < maxField){
x++;
$(wrapper).append(fieldHTML);
}
});
$(wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
</script>
Code Explanation:
In the above code, maxField variable is set to 5 & x < maxField will check maximum number of input fields.
If x is less than maxField & add button (+) is clicked, then new input field will be append to the parent div & x will be incremented.
If remove button (-) is clicked then input field will be removed & x will be decremented.
HTML Code:
<div class="field_wrapper">
<div>
<input type="text" name="field_name[]" value=""/>
<a href="javascript:void(0);" class="add_button" title="Add field">+</a>
</div>
</div>
PHP code to get these fields value in your page.
<?php
print '<pre>';
print_r($_REQUEST['field_name']);
print '</pre>';
//output
Array
(
[0] => value1
[1] => value2
[2] => value3
[3] => value4
)
?>
![](http://findnerd.s3.amazonaws.com/imagedata/8896/8896.gif)
0 Comment(s)