duplicating input fields with different names

[real_illusions]

Hi all,I need to make a link to duplicate a div which has a few input fields via Ajax.Like the "create more fields" you see a few times. I would like to use jQuery to do this as thats what I'm familiar with.But, if I duplicate the div, then the name's of the inputs are going to conflict. How do you avoid this?Thanks.

[[dx]]

Put name="name_here[]"Not really sure, but I think you are getting this with $_GET[0] , $_GET[1] or $_POST, whatever you are using.

[real_illusions]

Thanks, but I haven't got any idea on where to start.I see theres a .clone() function in jQuery, would that work? And I still need the form to work without Javascript enabled.

[thescientist]

what do you have so far? Adding elements shouldn't be that hard, and perhaps you can have a reference to a global indexer to append to each new element made. id="div1", id="div2", id="div3", where x is being incremented from 0 each time a new element is added.I think what Haris S was getting at was that if you had a bunch of checkboxes, for example, and just gave them the same name, then it would theoretically add itself to the array of checkboxes that you would be able to access in your server side script, using GET or POST.I remember reading a (somewhat intense/confusing) article about attaching elements to the DOM after the page has been loaded, and making sure their functions and event handlers still fire. AJAX is a bit tricky in that respect, and I will see if I can find it for you. It might not apply in this situation if you don't need any of that added functionality. I think the only thing is to make sure that newly attached DOM elements still register when submitting the form. I think the best bet right now is to create a prototype and then start shaking the bugs out once you've got an idea of which direction you want to go down.

[ShadowMage]

I remember reading a (somewhat intense/confusing) article about attaching elements to the DOM after the page has been loaded, and making sure their functions and event handlers still fire.

I think the clone function that real_illusions mentioned takes care of all that. In the documentation it mentions the ability to copy data and event handlers so I would assume that issue is accounted for.After the data is cloned it's a matter of looping through each element inside the new div and updating names/ids as appropriate. You could use the technique that scientist mentioned where you append an indexer to the end of the name/id or you could make each input an array as Haris S suggested. With Haris's suggestion you'd still need to loop through to update any id's, though.

[real_illusions]

Found a script that does one: http://new2wp.com/snippet/jquery-add-remov...ut-form-fields/Just a matter of figuring out how to modify it to deal with multiple form inputs...seems to be trickier than originally thought as all the ones I need to 'clone' are inside a div and are also different to the example html.