Solved

jQuery form cloning

Posted on 2011-09-27
5
286 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Angular.js example vocabulary extensions 5 50
Error in JQuery 5 52
jQuery slideToggle working incorrectly 3 24
jquery datable hidden section doesn't submit 2 9
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
The viewer will learn how to dynamically set the form action using jQuery.
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…

773 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