Solved

jQuery form cloning

Posted on 2011-09-27
5
285 Views
Last Modified: 2012-06-27
We allow people to register other people for courses. I want to allow them to enroll multiple participants at one time. The UI should have one and only one form but when they enter a person's information and click a button to add another person, they should be able to see a list of people that they have previously registered and have the capability to remove them from the list.

Here is a URL to the basic beginnings with comments on what needs to be done: http://jsfiddle.net/Mrbaseball34/vdUuy/3/

I'm having problems with being able to set the participant's name in the cloned participant's div
0
Comment
Question by:EddieShipman
  • 3
  • 2
5 Comments
 
LVL 19

Expert Comment

by:moagrius
ID: 36895779
there are several problems with that script as is, including what might be some misunderstandings of how selectors work...  for example, when you say $(".participant", "#content").clone(); - that doesn't work.  if you pass a second argument to $, it looks at that as the context to search within for the selector in the first argument.

also, i'd very strongly suggest managing the list of participants through some model object - even a very basic one (like a simple array), rather than just writing directly to the dom.  that'll save you a lot of headache later.

rather than pointing out the various issues, i put together a very simple fiddle for how i'd perform the basic operation (there are a ton of ways you could approach this - what I've included is a very bare-bones sample to illustrate one way):  http://jsfiddle.net/S24wu/

HTH, GL
0
 
LVL 26

Author Comment

by:EddieShipman
ID: 36903536
How about adding capability to delete participants?
0
 
LVL 19

Accepted Solution

by:
moagrius earned 500 total points
ID: 36903888
then just splice out the participant from the array, and run it again.

the following update is only different by about six lines - just click any participant name to remove it:

http://jsfiddle.net/S24wu/1/
0
 
LVL 26

Author Closing Comment

by:EddieShipman
ID: 36904437
Very simple and clean.

Thanks.
0
 
LVL 26

Author Comment

by:EddieShipman
ID: 36904606
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now