Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 296
  • 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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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