Add Remove Multiple Input Fields Dynamically With Jquery
In this tutorial we learn dynamic form fields - add & remove multiple fields and retrieve the value using PHP. Example script to add/remove multiple input fields dynamically with jquery.
we learn to add/remove input fields dynamically with jquery. this form submit is very useful many times bulk data needs to be submitted at once. If you have a requirement to add/remove multiple input fields dynamically with jquery, the input group makes it easy for you. we will easily Example from scratch how dynamically add/remove multiple input fields and submit to the database with jquery.
We will show how to add or remove input fields dynamically using jQuery. add a single input field in one click submitted. Now we will show full functionality to make a form more fields dynamically. Today, I will show you how to add/remove dynamically multiple input fields and submit to the database with jquery and PHP.
Add/remove multiple input fields dynamically with jquery will look like, you can see in the following picture:
Add & Remove Group of Input Fields Dynamically
This example shows how to add/remove dynamically multiple input fields and submit to the database with jquery and PHP. For the example purpose, we will use two fields (name) in each group and all fields can be submitted at once.
Bootstrap & jQuery Library
The Bootstrap is used to make the input and button look better and jQuery is used to implement add/remove multiple input fields dynamically with javascript. So, you need to include the Bootstrap and jQuery library first.
<!-- Bootstrap css library --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
HTML
One input field will be shown and more input can be added by the Add More button placed inside these input fields. Also, a hidden input filed is placed which will be used to add more input fields HTML with the remove button dynamic form fields - add & remove bootstrap.
<h2>Add Remove Multiple Input Fields Dynamically With Jquery - phpcodingstuff.com</h2>
<form method="post" action="submit.php">
<div class="form-group fieldGroup">
<div class="input-group">
<input type="text" name="name[]" class="form-control" placeholder="Enter name"/>
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
</form>
<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group">
<input type="text" name="name[]" class="form-control" placeholder="Enter name"/>
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
</div>
</div>
</div>
JavaScript
In this Step we Add More button (.addMore) is clicked, the clone HTML from the hidden input group will append after the last fieldGroup. You can also restrict the limit to add input fields group by maxGroup this time and Remove button (.remove) deleted the parent fieldGroup. Then We learn dynamically add multiple input fields and submit to the database with jquery and PHP.
$(document).ready(function(){
//group add limit
var maxGroup = 20;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
Get Input Value of Multiple Field in PHP
In this step, multiple text fields are submitted to the server-side script (submit.php), use the $_POST method to retrieved value from the input fields in PHP add/remove multiple input fields dynamically with jquery.
<?php
if(isset($_POST['submit'])){
$nameArr = $_POST['name'];
if(!empty($nameArr)){
for($i = 0; $i < count($nameArr); $i++){
if(!empty($nameArr[$i])){
$name = $nameArr[$i];
// Database insert query goes here
}
}
}
}
?>
I hope it can help you...
Leave a Reply