Today, We want to share with you add/remove input fields dynamically with javascript.In this post we will show you dynamic form fields – add & remove bootstrap 3, hear for how to make dynamic input fields using jQuery with add, remove option we will give you demo and example for implement.In this post, we will learn about add more and remove in jquery with an example.

Add or Remove Input Fields Dynamically using jQuery?

Contents

Step 1 : Include jQuery & Bootstrap

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Step 2 : Create a Simple Form

<form method="post" action="">
    <div class="row">
        <div class="col-lg-12">
            <div id="contentFrmTxt">
                <div class="input-group mb-3">
                    <input type="text" name="title[]" class="form-control m-input" placeholder="Enter title" autocomplete="off">
                    <div class="input-group-append">                
                        <button id="deleteContent" type="button" class="btn btn-danger">Remove</button>
                    </div>
                </div>
            </div>

            <div id="addMore"></div>
            <button id="freshAddedContent" type="button" class="btn btn-info">Add Row</button>
        </div>
    </div>
</form>

Step 3 : Make Field Dynamic

<script type="text/javascript">
    // add row
    $("#freshAddedContent").click(function () {
        var content = '';
        content += '<div id="contentFrmTxt">';
        content += '<div class="input-group mb-3">';
        content += '<input type="text" name="title[]" class="form-control m-input" placeholder="Enter title" autocomplete="off">';
        content += '<div class="input-group-append">';
        content += '<button id="deleteContent" type="button" class="btn btn-danger">Remove</button>';
        content += '</div>';
        content += '</div>';

        $('#addMore').append(content);
    });

    // remove row
    $(document).on('click', '#deleteContent', function () {
        $(this).closest('#contentFrmTxt').remove();
    });
</script>

Step 4 : The Full Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Add or Remove Input Fields Dynamically using jQuery - www.pakainfo.com</title>

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <div class="container"style="max-width: 700px;">

        <div class="text-center" style="margin: 20px 0px 20px 0px;">
            <a href="https://www.pakainfo.com/" target="_blank" rel="noopener"><img src="https://i.imgur.com/hHZjfUq.png"></a><br>
            <span class="text-secondary">Add or Remove Input Fields Dynamically using jQuery</span>
        </div>

        <form method="post" action="">
            <div class="row">
                <div class="col-lg-12">
                    <div id="contentFrmTxt">
                        <div class="input-group mb-3">
                            <input type="text" name="title[]" class="form-control m-input" placeholder="Enter title" autocomplete="off">
                            <div class="input-group-append">                
                                <button id="deleteContent" type="button" class="btn btn-danger">Remove</button>
                            </div>
                        </div>
                    </div>

                    <div id="addMore"></div>
                    <button id="freshAddedContent" type="button" class="btn btn-info">Add Row</button>
                </div>
            </div>
        </form>
    </div>

    <script type="text/javascript">
        // add row
        $("#freshAddedContent").click(function () {
            var content = '';
            content += '<div id="contentFrmTxt">';
            content += '<div class="input-group mb-3">';
            content += '<input type="text" name="title[]" class="form-control m-input" placeholder="Enter title" autocomplete="off">';
            content += '<div class="input-group-append">';
            content += '<button id="deleteContent" type="button" class="btn btn-danger">Remove</button>';
            content += '</div>';
            content += '</div>';

            $('#addMore').append(content);
        });

        // remove row
        $(document).on('click', '#deleteContent', function () {
            $(this).closest('#contentFrmTxt').remove();
        });
    </script>
</body>
</html>

I hope you get an idea about add input field on click jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Add or Remove Input Fields Dynamically using jQuery?

Related posts: