Jquery Add More Input fields

These days a very frequent requirement from customers is to have input fields dynamically added to a form while typing in it. This should happen without refreshing the page because the user shouldn't be submitting the form before all their information is completed. Here  is a simple example of such interface.


If you are looking to add and remove more input fields, here’s a jQuery example below to do the task for you. This jQuery snippet adds more input fields dynamically with the validation .

Here we start with 1 row of  input field and let user add more fields . Same process goes to delete button, when clicked, it removes current text field by removing the parent element, which is '<tr>' (you can use <div> also) element.

We start with single row of  Input fields and a “Add more ” link to allow user to add more fields with blank validation. The text input field is wrapped in '<tr>' element, as explained above, on 'delete' link click, it finds parent element, which is '<tr>' and removes it.

Download Code Here