Solved

jQuery form cloning

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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
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)

706 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

18 Experts available now in Live!

Get 1:1 Help Now