Multiple Input Form Add Button HTML + JQuery

By Posted on

Multiple Input Form

Multiple Input Form Add Button HTML + JQuery – In this tutorial I will share the basic program code to automatically display the form when the “Add” button is pressed. Then when the “Save” button is clicked, all data from the form will be showing.

We will make it all in one page only, making it easier to understand how the program code works. The program below is a modified version of an Indonesian website, you can see it here.

Multiple Input Form Add Button HTML + JQuery

HTML + Bootstrap Code

For this tutorial, the framework I use is Bootstrap 5. I put bootstrap 5 in the head. The program code is like this: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
</head>

</html>

Insert Form Code

After the html is available, we have to create a form to input data along with the buttons such as the save button, add button and delete button.

For the program code you can use the following. Please insert the following code after “</head>”: 

<body>
    <div class="container mt-5">
        <h1 class="text-center">Multiple Input Form</h1>
        <div class="row mt-5 mb-5">
            <div class="col">
                <form method="post" action="">
                    <div class="form-group fieldGroup mt-3" style="display: none;">
                        <div class="input-group">
                            <input type="text" name="name[]" class="form-control" placeholder="Name" />
                            <input type="text" name="Address[]" class="form-control" placeholder="Address" />
                        </div>
                    </div>
                    <input type="submit" name="submit" class="btn btn-primary mt-3" value="Save" />
                    <a href="javascript:void(0)" class="btn btn-success addMore float-end mt-3">+ Add</a>

                </form>
                <div class="form-group fieldGroupCopy" style="display: none;">
                    <div class="input-group mt-2">
                        <input type="text" name="name[]" class="form-control" placeholder="Name" />
                        <input type="text" name="Address[]" class="form-control" placeholder="Address" />
                        <div class="input-group-addon">
                            <a href="javascript:void(0)" class="btn btn-danger remove">Delete</i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

JQuery Code

After the form appears, we can’t use it yet. We have to add JQuery, so that the data can be manipulated client side.

The following code is set so that the form can appear with a maximum limit of 100 forms. you can change the value in the “maxGroup” line.

Put the following script after “</body>”: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function() {
        // max of form
        var maxGroup = 100;

        //process 
        $(".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 form
        $("body").on("click", ".remove", function() {
            $(this).parents(".fieldGroup").remove();
        });
    });
</script>

PHP Code

To be able to return the input data, I provide the PHP program code. So, this PHP is useful for get submitted queries.

In this PHP program code, there is no command to save to the database. This is just a demo program displaying data using the “echo” command only.

Put this program code under “</script”: 

<?php
if (isset($_POST['submit'])) {
    $name = $_POST['name'];
    $Address = $_POST['Address'];
    if (!empty($name)) {
        for ($a = 0; $a < count($name); $a++) {
            if (!empty($name[$a])) {
                $names = $name[$a];
                $Addresses = $Address[$a];

                //show the data
                echo "<div class='container'> $names  $Addresses </br> </div>";
            }
        }
    }
}
?>

Now, please run the program above. If correct, you will see something like in the following video:

Hopefully Multiple Input Form Add Button HTML + JQuery article is useful.

Share this article using this share button below: