0

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.

Improve this question
4
  • 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 Commented Apr 5, 2011 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. Commented Apr 5, 2011 at 17:13
  • 1
    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! Commented Apr 5, 2011 at 18:40
  • @Federico - thanks, I almost have it, jsfiddle.net/bkmorse/FW6s8/4 Commented Apr 5, 2011 at 19:23

1 Answer 1

Reset to default
2

Here is something I put together:

http://jsfiddle.net/jtbowden/XFsyh/

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):

http://jsfiddle.net/jtbowden/XFsyh/4/

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:

http://jsfiddle.net/jtbowden/JTUkE/

And if you want it animated:

http://jsfiddle.net/jtbowden/brBSa/

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

awesome! your recent update to it revision 3, it worked just fine in the first version of it.
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.
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.
OK, added an original/fixed version above.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.