In this tutorial, you will learn how to add or remove input fields dynamically using jQuery and PHP.  Sometimes we have the requirement like add the  dynamic fields at run time based on users action. for example. User can have multiple phone numbers or few users have only one phone number. So at this time we can add the dynamic fields on webform and we can save the dynamic added fields in database also.
This example will help you to add or remove the dynamic fields using jquery.

index.php

<!--
Used basic html and bootstrap skeleton from the below link for style purpose which contains bootstrap.css,bootstrap.js,jquery.js
https://www.w3schools.com/bootstrap/bootstrap_get_started.asp
Used bootstrap form elements from below link.
https://www.w3schools.com/bootstrap/bootstrap_forms.asp-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Add Remove input fields dynamically using jQuery</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">      
        <style>
            .mob-box{
                margin-top: 10px;
                margin-bottom: 10px;
            }
            .form-ctr{
                width: calc(100% - 100px);
                float: left;
            }
            .mob-box .cust-btn{
                float: left;
                width: 90px;
                margin-left: 10px;
            }
        </style>
    </head>
    <body>
        <div class="container" style="max-width:800px;margin:0 auto;margin-top:50px;">  
            <div>
                <h2 style="margin-bottom:50px;">Live Demo: Add Remove input fields dynamically using jQuery</h2>
                <div>
                    <form method="post" enctype="multipart/form-data" action="">
                        <div class="form-group">
                            <div>
                                <label>Mobile Number:</label>
                            </div>
                            <div class="mob-box">
                                <input type="text" class="form-control form-ctr" name="mobiles[]" placeholder="Enter mobile">
                                <a href="javascript:void(0);" class="btn btn-success cust-btn add-field">Add</a>
                                <div class="clearfix"></div>
                            </div>
                        </div>  
                        <div class="form-group">
                            <input type="submit" class="btn btn-primary" name="save" value="Save"/>
                        </div>
                    </form>
                    <?php
                    if (isset($_POST['save'])) {
                        echo "Apply the server side logic-";
                        echo "<pre>";
                        print_R($_POST['mobiles']);
                        echo "</pre>";
                    }
                    ?>
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script>

            $(document).on("click", ".add-field", function () {
                var field = '<div class="mob-box">' +
                        '<input type="text" class="form-control form-ctr" name="mobiles[]" placeholder="Enter mobile">' +
                        '<a href="javascript:void(0);" class="remove-field cust-btn">Remove</a>' +
                        '<div class="clearfix"></div>' +
                        '</div>';
                $(field).insertAfter('.mob-box:last');
            });
            $(document).on("click", ".remove-field", function () {
                $(this).parent('.mob-box').remove();
            });
        </script>
    </body>
</html>

Written by
Check out this Author's contributed articles.
If you like Tutorialsmint and would like to contribute, you can also write an article using Write an Article. See your article appearing on the Tutorialsmint main page and help other programmers to enhance their knowledge.

Comments(0)

RECENT TUTORIALS
Wed Dec 26 • 08:00 AM GMT
Wed Dec 26 • 08:00 AM GMT
Wed Dec 26 • 08:00 AM GMT
Wed Dec 26 • 08:00 AM GMT
Wed Dec 26 • 08:00 AM GMT
Edit Post
Add Reply