Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 299
  • Last Modified:

jQuery form cloning

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
Eddie Shipman
Asked:
Eddie Shipman
  • 3
  • 2
1 Solution
 
moagriusCommented:
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
 
Eddie ShipmanAll-around developerAuthor Commented:
How about adding capability to delete participants?
0
 
moagriusCommented:
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
 
Eddie ShipmanAll-around developerAuthor Commented:
Very simple and clean.

Thanks.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now