jQuery Academy · Lesson

Dynamic Form Field Manipulation

Learn to dynamically add, remove, and modify form fields based on user input, creating adaptable and interactive form interfaces using jQuery.

Dynamic Form Field Manipulation is a free jQuery Academy lesson on CoddyKit — lesson 1 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the jQuery Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Dynamic Forms: Why & How

Forms are often static, but modern web applications thrive on interactivity. Dynamic form field manipulation allows you to change a form's structure in real-time.

This means you can add, remove, or modify input fields as a user interacts with your page. It leads to a much better user experience and more adaptable forms!

Adding Fields: The Basics

The core idea behind adding fields is to create new HTML elements and insert them into the Document Object Model (DOM).

Use jQuery to create elements (e.g., $('')).
Use methods like .append(), .prepend(), .after(), or .before() to place them precisely within your form.
Remember to give new fields appropriate name attributes, especially for backend processing.

Add New Email Input

Let's add a button that, when clicked, generates a new email input field. Notice how we create the HTML string and then append it.

<div id="email-fields">
  <input type="email" name="email[]" placeholder="Email 1">
</div>
<button id="add-email">Add Another Email</button>

<script>
$(document).ready(function() {
  let emailCount = 1;
  $('#add-email').on('click', function() {
    emailCount++;
    const newEmailField = `
      <input type="email" name="email[]" 
             placeholder="Email ${emailCount}">
    `;
    $('#email-fields').append(newEmailField);
  });
});
</script>

Removing Fields: Cleanup

Just as users might need to add fields, they often need to remove them. This keeps the form clean and relevant to their needs.

jQuery's .remove() method is perfect for this. It takes the selected element(s) out of the DOM entirely, along with any associated data and event handlers.

Remove Specific Input

Now, let's extend our previous example. We'll add a 'Remove' button next to each email field. Clicking it will delete that specific field.

Important: Pay attention to how we handle events for dynamically added 'Remove' buttons!

<div id="email-fields">
  <div class="email-group">
    <input type="email" name="email[]" placeholder="Email 1">
    <button class="remove-email">Remove</button>
  </div>
</div>
<button id="add-email">Add Another Email</button>

<script>
$(document).ready(function() {
  let emailCount = 1;

  $('#add-email').on('click', function() {
    emailCount++;
    const newEmailGroup = `
      <div class="email-group">
        <input type="email" name="email[]" 
               placeholder="Email ${emailCount}">
        <button class="remove-email">Remove</button>
      </div>
    `;
    $('#email-fields').append(newEmailGroup);
  });

  // Event delegation for remove buttons
  $('#email-fields').on('click', '.remove-email', function() {
    $(this).parent('.email-group').remove();
  });
});
</script>

Modifying Fields: Adjusting Attributes

Sometimes you don't need to add or remove a field, but just change its properties. This could be its value, placeholder, disabled state, or even its name or id.

jQuery provides .attr() for HTML attributes and .prop() for DOM properties. Often, .prop() is preferred for boolean attributes like checked, disabled, or selected.

Toggle Field State

Here's an example where a checkbox controls whether a text input is enabled or disabled. We use .prop() to change the disabled property.

<label>
  <input type="checkbox" id="enable-input"> Enable Input
</label>
<input type="text" id="my-input" value="Hello" disabled>

<script>
$(document).ready(function() {
  $('#enable-input').on('change', function() {
    const isChecked = $(this).is(':checked');
    $('#my-input').prop('disabled', !isChecked); // Set disabled based on checkbox state
  });
});
</script>

Events on Dynamic Elements

A common pitfall: direct event handlers (like $('#myButton').on('click', ...)) only attach to elements present when the page loads.

For dynamically added elements, you need event delegation. This means attaching the event listener to a static parent element, and then specifying a selector for the dynamic child elements. jQuery's .on() method handles this beautifully.

"Add More" Practical Example

Combining what we've learned, here's a common pattern: an 'Add Skill' button that allows users to list multiple skills, with each skill having its own 'Remove' button.

Notice the use of data-id for unique identification and .closest() to find the parent to remove.

<div id="skill-list">
  <div class="skill-item" data-id="1">
    <input type="text" name="skill[]" placeholder="Skill 1">
    <button class="remove-skill">Remove</button>
  </div>
</div>
<button id="add-skill">Add Skill</button>

<script>
$(document).ready(function() {
  let skillId = 1; // Unique ID for each skill item

  $('#add-skill').on('click', function() {
    skillId++;
    const newSkillItem = `
      <div class="skill-item" data-id="${skillId}">
        <input type="text" name="skill[]" 
               placeholder="Skill ${skillId}">
        <button class="remove-skill">Remove</button>
      </div>
    `;
    $('#skill-list').append(newSkillItem);
  });

  // Event delegation for remove buttons
  $('#skill-list').on('click', '.remove-skill', function() {
    // Prevent removing the very first skill if desired
    if ($('.skill-item').length > 1) {
      $(this).closest('.skill-item').remove();
    } else {
      alert("You need at least one skill!");
    }
  });
});
</script>

Dynamic Form Check

Test your understanding of dynamic form manipulation.

Recap: Dynamic Forms

In this lesson, you learned how to make forms more interactive and user-friendly by dynamically adding, removing, and modifying fields using jQuery.

Use .append(), .prepend(), .after(), .before() to add elements.
Use .remove() to delete elements.
Use .attr() and .prop() to modify element attributes and properties.
Crucially, use event delegation with .on() for events on elements that are added to the DOM after the initial page load.

Next, we'll dive into client-side form validation!

Frequently asked questions

Is the “Dynamic Form Field Manipulation” lesson free?

Yes — the full text of “Dynamic Form Field Manipulation” is free to read here on the web, and the jQuery Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the jQuery Academy course, upgrade to CoddyKit PRO.

What will I learn in “Dynamic Form Field Manipulation”?

Learn to dynamically add, remove, and modify form fields based on user input, creating adaptable and interactive form interfaces using jQuery. You practise jQuery Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start jQuery Academy?

No prior experience is required. jQuery Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Dynamic Form Field Manipulation” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this jQuery Academy lesson?

Yes. Every jQuery Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to jQuery Academy