Hello fellow developers! If you've ever needed to create a dynamic form with fields that can be added or removed on-the-fly, this post is for you! In this tutorial, we'll explore how to build a dynamic form using HTML templates, along with the power of Bootstrap and jQuery. Let's get started!
Set Up the HTML Structure
To begin, let's set up the basic HTML structure and include the necessary Bootstrap and jQuery libraries:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Form Field</title>
<!-- Add Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<form id="dynamic-form">
<div id="form-fields">
<!-- Dynamic form fields will be added here -->
</div>
<button type="button" class="btn btn-primary mt-3" id="add-field-btn">Add Field</button>
<button type="submit" class="btn btn-success mt-3">Submit</button>
</form>
</div>
<!-- Add Bootstrap and jQuery scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Create the HTML Template
Next, define the HTML template that represents a single form field. We'll use JavaScript to clone this template whenever the user wants to add a new field dynamically:
<!-- The HTML template for a dynamic form field -->
<script id="form-field-template" type="text/template">
<div class="form-group">
<input type="text" class="form-control" name="dynamicField[]" placeholder="Enter your data">
<button type="button" class="btn btn-danger remove-btn">Remove</button>
</div>
</script>
Implement the JavaScript Logic
Now, let's add the JavaScript logic to handle the dynamic form field addition and removal:
<script>
// Function to add a new form field
function addFormField() {
var template = $("#form-field-template").html();
$("#form-fields").append(template);
}
// Function to remove a form field
$(document).on("click", ".remove-btn", function () {
$(this).closest(".form-group").remove();
});
// Event listener for the "Add Field" button
$(document).on("click", "#add-field-btn", function () {
addFormField();
});
</script>
Test Your Dynamic Form!
You're all set! Open the HTML file in your browser, and you'll have a dynamic form that allows you to add and remove fields as needed. It's powered by Bootstrap for styling and jQuery for dynamic behavior.
Now you have a powerful tool to create versatile forms that cater to different user needs. Customize it further, add validation, and explore the possibilities!