Add/Remove Input Fields Dynamically with jQuery

Step 1: HTML Structure

The HTML structure includes the form, a button to add new fields, and placeholders for each dynamically added field.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Dynamic Form Add/Remove</title>

    <!-- Bootstrap for styling -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <style>
        .error {
            color: red;
        }
        .panel-primary {
            border-color: #33cabb !important;
        }
        .btn-primary {
            background-color: #33cabb !important;
        }
        .panel-primary .btn {
            border-radius: 1px !important;
            border-color: #33cabb !important;
        }
        .panel-primary>.panel-heading {
            color: #fff !important;
            background-color: #33cabb !important;
            border-color: #33cabb !important;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <h1>Dynamic Form - Add/Remove Input Fields</h1>
            <div class="panel panel-primary">
                <div class="panel-heading">Create Employee Form</div>
                <div class="panel-body">
                    <form class="form-horizontal" id="myForm">
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="textinput">Employee Name </label>
                            <div class="col-md-4">
                                <input id="Name" name="Name" type="text" placeholder="Enter Employee Name" class="netEmp form-control input-md">
                            </div>
                            <div class="col-md-2">
                                <button id="btnAdd" type="button" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> Add Employee</button>
                            </div>
                        </div>
                        <br />
                        <div id="employeeList"></div>
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="button1id"></label>
                            <div class="col-md-8">
                                <button id="btnSubmit" type="submit" name="btnSubmit" class="btn btn-primary">Submit</button>
                                <input id="btnReset" type="reset" name="btnReset" class="btn btn-info" value="Reset">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            var i = 1;  // Initialize counter for dynamic inputs
            // Add new fields when Add button is clicked
            $("#btnAdd").click(function(e) {
                e.preventDefault();
                var newInputField = '<div class="form-group" id="emp' + i + '">' +
                                    '<label class="col-md-4 control-label" for="empName-' + i + '">Employee ' + i + ' Name</label>' +
                                    '<div class="col-md-4"><input id="empName-' + i + '" name="empName-' + i + '" type="text" placeholder="Enter Employee Name" class="netEmp form-control input-md"></div>' +
                                    '<div class="col-md-2"><button type="button" class="btn btn-danger removeField" data-id="emp' + i + '"><i class="glyphicon glyphicon-remove"></i> Remove</button></div>' +
                                    '</div>';
                $("#employeeList").append(newInputField);
                i++;
            });

            // Remove field when Remove button is clicked
            $(document).on("click", ".removeField", function() {
                var fieldId = $(this).data('id');
                $('#' + fieldId).remove();
            });

            // Form validation
            $("#myForm").validate({
                rules: {
                    Name: "required"
                }
            });
        });
    </script>
</body>
</html>

Key Features in This Code:

Adding New Fields:
- The Add Employee button (#btnAdd) creates a new input field each time it is clicked.
- Each new input field has a unique identifier (empName-1, empName-2, etc.) and a corresponding "Remove" button.
Removing Fields:
- Each input field comes with a "Remove" button next to it, and when clicked, the associated input field is removed from the form.
Form Validation:
- The form is validated using jQuery's validate() method. In this case, it ensures that the Employee Name is required. You can easily add more validation rules for the dynamically created input fields as needed.
Dynamic Field Indexing:
- Each dynamically added input field is given a unique identifier using the counter i, which increments with every new field added.

How it Works:

When the user clicks the Add Employee button, a new input field (along with a remove button) is appended to the form.
The user can remove any added input field by clicking the Remove button next to it.
The form also provides validation for the fields using jQuery's validate() method, which ensures that the form data is correctly submitted.

Souy Soeng

Add/Remove Input Fields Dynamically with jQuery

Step 1: HTML Structure

Key Features in This Code:

How it Works:

Post a Comment

Souy Soeng