Hello, I am extremely new to jquery and I've been doing a lot of research in trying to clone a nested fieldset, at least I think that's what its called. I have a very simple form that has the following: AREA - input box Details ==================================== SIZE Quantity Price ==================================== input box input box input box I want to be able to add some controls that can do the following, one would be to be able to add more details within that area, so lets say I wanted to add 3 more fields to details it would look like this: AREA - input box Details ==================================== SIZE Quantity Price ==================================== input box input box input box input box input box input box Delete input box input box input box Delete input box input box input box Delete And then if I wanted to add a new area it would look something like this: AREA - input box Details ==================================== SIZE Quantity Price ==================================== input box input box input box input box input box input box Delete input box input box input box Delete input box input box input box Delete AREA - input box Delete Area Details ==================================== SIZE Quantity Price ==================================== input box input box input box Does anyone have any simple way of doing this? I have found a few plugins like sheepit and some other ones, but they are very complicated to use and to modify to fit for what I want to do. Any help would be very much appreciated
Extremely confusing, but you want to be able to add (and delete?) separate lines of input boxes for SIZE / Quantity / Price (each on its own line), and a complete new set (AREA and all the rest)? So, basically, what you want is adding the following: <input type="text" name="size_VAR"><input type="text" name="quantity_VAR"><input type="text" name="price_VAR"> Code (markup): right before either the end of a fieldset, or the form itself? That's fairly simple, something like: $(function() { $('.click_to_add_input').click(function() { $('#id_of_form_or_fieldset').append('<input-code goes here>'); }) // here you can add functionality for deleting, and of course, if you add another button to add a complete secondary form/fieldset, you can do that within the anonymous function as well }) Code (markup): This is pseudo-code, and can't be copied verbatim, but should give you an idea.
Yeah, I'm not quite following what it is you're trying to do -- the description is just a confusing mess; could you show us that as MARKUP, in particular what you're trying to copy? Generally speaking though, if all you are trying to do is clone a fieldset why are you wasting time even having any jQuery asshattery on the page? Node.cloneNode() sounds like what you want. Just appendChild (or insertBefore) a cloned copy. It's probably also then walk the DOM to empty out the clone's values.