Question

Good day users,

I want to make an form with an input field, and when an users starts to type in that input field another input field appears below it. This so the user can add multiple products without seeing an list of 20 input fields but just see an new input field when they type in the first one.

I hope some1 here knows where i can look for this.

Kind regards,

Augus

Answer 1

As @karthikrangaraj pointed out in his comment, you can do it attaching an onkeyup event handler to those inputs, and calling there a function that will dinamically add the elements to the container.

You’ll have to keep track of which input fields have already created a child input in order to avoid creating new fields at every key press, and you’ll also have to keep track of the number of elements added in order to assign coherent name/id attributes to the newly created elements.

See a basic working example in this fiddle.