Adding form inputs in javascript (jquery)

Question

I understand that you do something like:

$('form').append('<input type="text" name="color-1" value="Hello" />');

But I have two questions about it. First off, I don't want it added to the end of the form, but after the last input in the "color" section. Secondly, where "name=color-1", I need the one to increment if they want to add more than one input, you know? So that I can process it on the server.

Any ideas?

Answer 1

I guess what you are looking for is the .after() // .insertAfter() function. Let's say you have a DIV with the class "color" within your form, you would do

$('form').find('.color > :input').last().after('<input type="text" name="" value=""/>');

To add more of those input fields, just add a button or anything else which is capable of executing a click event, where you can execute code to insert more inputs.

Kind Regards

--Andy