Add Remove Group of Input Fields Dynamically using jQuery


The Input fields group is very useful when the bulk data needs to be submitted at once. If you have a requirement to submit the group of bulk data with multiple input fields, input group makes it easy for you. Instead of shown some specific number of input group at once, you can add the input groups dynamically to make the web application more user-friendly.

In the earlier tutorial, we have shown how to add or remove input fields dynamically using jQuery. But this script allows users to add single input field in one click. Now we will extend its functionality to make web form more productive. In this tutorial, we will show you how to add input fields group dynamically using jQuery and submit input groups value using PHP.

Add & Remove Group of Input Fields Dynamically

The following example shows how you can add more group of multiple input fields dynamically with jQuery and submit the multiple input fields group data using PHP. For the example purpose, we will use two fields (name & email) in each group and all group can be submitted at once.

Bootstrap & jQuery Library
The Bootstrap is used to make the input and button look better and the jQuery is used to implement add more input fields group functionality. 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>
<!-- Bootstrap js library -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Note that: If you don’t want to use the Bootstrap library, you can skip to include the Bootstrap library (bootstrap.min.css and bootstrap.min.js). But the jQuery library is required to implement add more input fields group functionality.

HTML
Initially, one input fields group will be shown and the more input group can be added by the Add More button placed beside this input fields group. Also, a hidden input group is placed which will be used to add more input fields HTML with the remove button.

<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"/>
            <input type="text" name="email[]" class="form-control" placeholder="Enter email"/>
            <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"/>
        <input type="text" name="email[]" class="form-control" placeholder="Enter email"/>
        <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
Once the Add More button (.addMore) is clicked, the clone HTML from the hidden input group will append after the last fieldGroup. You can also restrict limit to add the input fields group by maxGroup. The Remove button (.remove) deletes the parent fieldGroup.

$(document).ready(function(){
    //group add limit
    var maxGroup = 10;
    
    //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();
    });
});

Submit Values of Multiple Text Field Group

Once the form is submitted to the PHP script (submit.php), the value of multiple text fields group can be retrieved by the following way.

<?php
if(isset($_POST['submit'])){
    
$nameArr $_POST['name'];
    
$emailArr $_POST['email'];
    if(!empty(
$nameArr)){
        for(
$i 0$i count($nameArr); $i++){
            if(!empty(
$nameArr[$i])){
                
$name $nameArr[$i];
                
$email $emailArr[$i];
                
                
//database insert query goes here
            
}
        }
    }
}
?>

Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request

Recommended Tutorials For You

Leave a reply