Take the 2-minute tour ×

I have a form that requires the user to input their project's outcome.

They are required to input at least one outcome, and each outcome has a requirement of at least 2 measures associated with it.

So I need the ability to present the user with the initial outcome field, with two measure fields associated with it, with the ability to add more measures to its related outcome.

I sketched up what it would look like if the user were to have two outcomes. sketch of what it would look like

The dotted lines are the actions of each button.

I would like to accomplish this using jQuery, but I have never done anything more than just displaying/hiding a field based on what the user clicks.

Any help is appreciated.

Just to sum it up, they are required to provide one outcome, each outcome has at least two measures.

EDIT: Began proofing it here: http://jsfiddle.net/bkmorse/FW6s8/4/ - but the add measure button is not working properly.

share|improve this question
api.jquery.com/clone clone() is what you need. But, make sure you edit the id's of the clone so that you can identify it –  rsplak Apr 5 '11 at 17:02
I am looking to make the form dynamic, I am not sure how many fields will be needed, it depends on how many outcomes and how many measures for each outcome the user needed. I am not sure that clone will satisfy this case, but I am not an expert. –  Brad Apr 5 '11 at 17:13
I wrote a plugin called jquery.duplicatah which I'm using on a project, it was not released to the public yet. If nobody presents you with a better option I could pack it up and upload it for you. It does exactly what you want. And yes, it uses a lot of jquery.clone() black magic to work! –  Federico Cáceres Apr 5 '11 at 18:40
@Federico - thanks, I almost have it, jsfiddle.net/bkmorse/FW6s8/4 –  Brad Apr 5 '11 at 19:23
add comment

1 Answer

up vote 2 down vote accepted

Here is something I put together:


The trickiest part, and most of the code is dealing with form input names.

The main part of the code depends on a non-displayed template which is cloned when elements are added. This makes it easier to create new elements, because you just have to modify the template.

Update: Here is a version that allows you to remove the first outcome/measure as long as others exist, plus I cleaned up some other things (bugs):


Note the use of .live(). The buttons in your example don't work because you are assigning handlers once, before those buttons exists. .live() assigns the handler to the root of the DOM, so that any elements added later will also have the correct handler.

Here is the original version with fixes, as per you request:


And if you want it animated:


share|improve this answer
awesome! your recent update to it revision 3, it worked just fine in the first version of it. –  Brad Apr 5 '11 at 20:10
There were some bugs in the other versions. I am cleaning them up as I find them. This is what happens when you code on the fly instead of planning first. –  Jeff B Apr 5 '11 at 20:12
revision 4, I don't want them to be able to remove the first outcome and its related measures, like you had it in the original code. –  Brad Apr 5 '11 at 20:15
OK, added an original/fixed version above. –  Jeff B Apr 5 '11 at 20:27
thank you very much, extremely helpful. –  Brad Apr 5 '11 at 20:30
add comment

Your Answer


