Your Privacy

This site uses cookies to enhance your browsing experience and deliver personalized content. By continuing to use this site, you consent to our use of cookies.
COOKIE POLICY

Skip to main content

Dynamically Adding Form Elements in JQuery

Dynamically Adding Form Elements in JQuery
Back to insights

In my last project, my client wanted the ability to add multiple form elements to their existing forms.  This was relatively easy using JQuery and JavaScript. This tutorial will show you how to dynamically add, delete and save the form elements.

The Code

First things is to build out the HTML file with a form.

Dynamically Adding Form Elements in JQuery - 1

This is the output from the HTML above. Note that the ‘save button’ does not show because I didn’t want the user to click on the button with nothing to save.

When the document loads it hides the save button and initializes a counter variable called ‘x’. This counter keeps track of how many form elements there are.

When the user clicks on the ‘add row’ button it appends a first name, last name and a delete button.

Dynamically Adding Form Elements in JQuery - 2

Below shows that I’m appending a new form element to the div named ‘input_wrapper’.

Dynamically Adding Form Elements in JQuery - 3

HTML view

Dynamically Adding Form Elements in JQuery - 4

For the delete functionality, every time the user clicks on a delete button, I’m targeting the button’s class, ‘deleteBtn’. From that click, I can get access to the event object. In that event object, I can look for the id which is the counter, ‘x’.  Then I can remove that form element based on the id associated with the div.

Dynamically Adding Form Elements in JQuery - 5

There are many ways you can save a form, but I decided to use a button. First, I serialized the form based on the input’s name attribute.

Dynamically Adding Form Elements in JQuery - 6

Secondly, if the form has more than one element, you can push it into an array and submit. Otherwise, for the one form element, you can set the object and submit.

Dynamically Adding Form Elements in JQuery - 7

Hope you found this tutorial helpful and useful. Click here for the working demo.

Digging In

  • Digital Products

    What to Ask in a UX Discovery Session

    Better questions lead to better design. In my years as a UI/UX designer, I’ve learned that many design challenges may come from misalignment at the start. Discovery sessions are where product clarity is either made or missed. These are a few discovery questions I consistently return to in the discovery phase of my UX design […]

  • Digital Products

    Designing For Play and Friction in a Fast-Paced World

    At UDig, play is an integral part of our philosophy. “Having fun” is embedded in our culture, and we always find opportunities to use play to encourage collaboration, ignite creativity, and make room for bold experimentation to build stronger teams and solve problems ranging from the seemingly simple to the most complex. I always have […]

  • Digital Products

    Config 2025 Day Two Recap

    It felt as though Config 2025 ended as soon as it began, and I believe those of us that attended are all the better for it. By the end of the day, various inspirational and informative talks had been given by thought leaders and innovators in the product space. Between sessions, we had the opportunity […]

  • Digital Products

    Inside Config 2025: What’s New in Figma

    Config 2025 kicked off with a bang on Day 1. Figma’s annual conference brings together designers, developers, and all those involved in the making of a product. The 2-day event has a stacked lineup of accomplished speakers ready to share their insights on the world of product building. At today’s opening keynote, the Figma team, […]

  • Digital Products

    Choosing the Right Modernization Approach

    When organizations decide it’s time to modernize their technology infrastructure, choosing the right approach is crucial. Modernization isn’t merely a technical upgrade; it’s a strategic business move that significantly impacts growth, agility, and long-term success. Here’s how your company can effectively begin to select the best modernization strategy tailored to your goals and challenges. In […]

  • Digital Products

    TAG Panel: Differentiate Your Customer Experience

    Join the CX and Product Management Societies to hear from our panel of Human-Centered Design experts on the business value of Agentic AI.