Dynamic Form Inputs
Adding Inputs
append() inserts brand-new input fields into a form at runtime, letting users add as many entries as they need, such as additional phone numbers or line items. The new fields become real form controls immediately, included in the form the same as any input written in the original HTML.
Example: Adding Inputs
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="fields"></div>
<button id="add">Add Field</button>
<script>
$("#add").on("click", function() {
$("#fields").append("<input type='text'>");
});
</script>
</body>
</html>Removing Inputs
Dynamic fields can be removed with remove() when they are no longer needed, such as clicking a 'delete row' button next to a specific entry. Removing an input this way also removes it from what gets submitted with the form.
Example: Removing Inputs
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="fields"><div class="row"><input><button class="del">Remove</button></div></div>
<script>
$("#fields").on("click", ".del", function() {
$(this).closest(".row").remove();
});
</script>
</body>
</html>Dynamic Events
Delegated events -- attaching a listener to a stable parent and checking event.target -- work with elements added later, unlike a direct listener bound only to elements that existed when the page loaded. This is essential for dynamic forms, since directly-bound listeners would never fire on inputs added after the fact.
Example: Dynamic Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="fields"></div>
<button id="add">Add</button>
<script>
$("#fields").on("click", "input", function() {
console.log("Clicked a field, even a new one");
});
$("#add").on("click", function() {
$("#fields").append("<input type='text'>");
});
</script>
</body>
</html>Counting Fields
A running counter can generate unique field names or ids for each new dynamically-added input, avoiding collisions between entries. This matters because form data with duplicate names can behave unpredictably when submitted.
Example: Counting Fields
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="fields"></div>
<button id="add">Add</button>
<script>
let count = 0;
$("#add").on("click", function() {
count++;
$("#fields").append("<input name='field" + count + "'>");
});
</script>
</body>
</html>Practical Dynamic Forms
Dynamic fields are useful for repeated data of unknown quantity ahead of time, like a variable number of guests or attachments. Combining append(), delegated events, and a counter covers the core mechanics needed to build this kind of form.
Example: Practical Dynamic Forms
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="guests"></div>
<button id="addGuest">Add Guest</button>
<script>
let guestCount = 0;
$("#addGuest").on("click", function() {
guestCount++;
$("#guests").append("<div class='row'><input name='g" + guestCount + "'><button class='del'>X</button></div>");
});
$("#guests").on("click", ".del", function() {
$(this).closest(".row").remove();
});
</script>
</body>
</html>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: