Help with jQuery form cloning

I am using the code posted in this answer to "clone" my form:

http://stackoverflow.com/questions/4400592/jquery-clone-form-and-increment

However, what I really want to do is to take two values from the current form, add it in another div, hide the current form, then show the empty cloned form.

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://www.scic.com/files/formclone/index.html


LVL 26
Eddie ShipmanAll-around developerAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
may help to start : http://jsfiddle.net/frcyP/
// 1. Clone the participant div 
          var clone_participant_div = $(".participant", "#content").clone();
          clone_participant_div.insertAfter("#voucher_form");
          // 2. Add the entered firstname + lastname to the 
          //    participants_name span 
          $(".participants_name", clone_participant_div).html( $("#lastname").val() + " " + $("#firstname").val() );
          $(".remove_participant", clone_participant_div).html( "remove" );
          // 3. Bind a click handler for the remove button (span)
          //    to be able to remove the entry from the participants_list 
          //    and remove the form fields for the participant to be removed
          $(".remove_participant", clone_participant_div).click(function() {
              $(this).parent(".participant").remove();
          })
          // 4. Hide the form that was just completed
          // 
          $("#voucher_form").hide();

Open in new window

0
 
Gurvinder Pal SinghCommented:
I think you can keep the template of that form in a string with a placeholder to append a common counter.
0
 
leakim971PluritechnicianCommented:
>However, what I really want to do is :

>to take two values from the current form,

var value1 = $("#field1_ID").val(); // input or select or textarea
var value2 = $("#field2_ID").val(); // input or select or textarea

>add it in another div :
x++; // to avoid having the same name
$("<input />").attr({ "name":"field1name"+x, "value":value1 }).appendTo("#Another_div_div");
$("<input />").attr({ "name":"field2name"+x, "value":value2 }).appendTo("#Another_div_div");

>hide the current form,
$("form").hide();

>then show the empty cloned form.
$("form").clone().show().appendTo("body");
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
Eddie ShipmanAll-around developerAuthor Commented:
var value1 = $("#field1_ID").val(); // input or select or textarea
var value2 = $("#field2_ID").val(); // input or select or textarea

Open in new window

How do I account for the change in names, based on which form it is?
0
 
leakim971PluritechnicianCommented:
ID is unique in a document.
If your form have a name or an ID (or why not a class) you can try to get the right field by ID (if you've more than one field with the same ID) by providing the "context"
the context is your form

for example :

var value1 = $("#field1_ID", "#form_to_clone").val(); // input or select or textarea
var value2 = $("#field2_ID", "#form_to_clone").val(); // input or select or textarea

it not necesaarily a form, it could be any other containter (context)
0
 
Eddie ShipmanAll-around developerAuthor Commented:
@leakim, please look at the example at the url I provided as well as the comments inside it.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
I am actually not cloning the FORM, just a div inside the form. please look at the code I provided.
0
 
leakim971PluritechnicianCommented:
SO or your own?
0
 
Eddie ShipmanAll-around developerAuthor Commented:
Here is a URL to the basic beginnings with comments on what needs to be done: http://www.scic.com/files/formclone/index.html
0
 
Eddie ShipmanAll-around developerAuthor Commented:
You're getting close. The last att div needs to be hidden, not the form.
I also changed to show it before the voucher form, as shown in the HTML.
0
 
leakim971PluritechnicianCommented:
>The last att div needs to be hidden
$(".attendee:last").hide();

0
 
Eddie ShipmanAll-around developerAuthor Commented:
Never used that jsFiddle before but it looks great. Got everything working, just a few more little gotchas that I think I can handle on my own.

Thanks a million.
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.

All Courses

From novice to tech pro — start learning today.