Topic: Dynamically Add Form Fields

Brian Clancey free asked 3 years ago

I am creating a subscription form and users have the ability to add extra users to their account. Right now I am using a textarea field which only asks for the email address. I would like to change this so they enter the person's name in one field and the email in another. Some people only have one extra user. Some companies have 12 or more.

I was thinking of changing to asking for the user name in one field with the email in an adjoining field in the same row.

My thinking is for a new user showing one or two fields is good enough, but I would like the form to automatically add another once one is completed. I have seen examples with add buttons, but if I can make one less user action necessary it would be awesome. Is this possible with MDB?

Brian Clancey free answered 3 years ago

I found bits and pieces of code and adapted them to my needs and I believe I have this working as I want! Thank you for the pointer to append(). Understanding that function better has helped a great deal.

The elements I am dealing with are inside a form so it has taken some time to get everything working in the form.

The appended data is not prefilled with user values. The most they can do is ask for another entry to be allowed or to delete those that are already there.

Since they are supplying a name and an email address the next step is to make sure the data is being passed back and validate it, returning the user to the page if there are problems. I apply strict rules to user input and filter everything to reduce the risk to the database and the client.

Krzysztof Wilk staff commented 3 years ago


I'm glad I could help. If you have more questions - feel free to ask :)

Best regards

Krzysztof Wilk staff answered 3 years ago


I think this is achievable. I assume that you have implemented validation for your inputs, so you can check if the values of your inputs are greater than 0 and they are properly filled - append new row with new inputs using i.e. .append() method from jQuery (you can read more here

Best regards

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.19.1
  • Device: Any
  • Browser: Any
  • OS: Linux
  • Provided sample code: No
  • Provided link: No