Solved

Help with jQuery form cloning

Posted on 2011-09-15
12
294 Views
Last Modified: 2012-05-12
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


0
Comment
Question by:EddieShipman
  • 6
  • 5
12 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36544634
I think you can keep the template of that form in a string with a placeholder to append a common counter.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36544733
>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
 
LVL 26

Author Comment

by:EddieShipman
ID: 36545025
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
 
LVL 82

Expert Comment

by:leakim971
ID: 36545056
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
 
LVL 26

Author Comment

by:EddieShipman
ID: 36545095
@leakim, please look at the example at the url I provided as well as the comments inside it.
0
 
LVL 26

Author Comment

by:EddieShipman
ID: 36545101
I am actually not cloning the FORM, just a div inside the form. please look at the code I provided.
0
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.

 
LVL 82

Expert Comment

by:leakim971
ID: 36545239
SO or your own?
0
 
LVL 26

Author Comment

by:EddieShipman
ID: 36545250
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36545608
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
 
LVL 26

Author Comment

by:EddieShipman
ID: 36545859
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
 
LVL 82

Expert Comment

by:leakim971
ID: 36545876
>The last att div needs to be hidden
$(".attendee:last").hide();

0
 
LVL 26

Author Closing Comment

by:EddieShipman
ID: 36546102
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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)
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…

920 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

16 Experts available now in Live!

Get 1:1 Help Now