mddev.co.uk

I had a problem recently with Jquery where I wanted to clone a form. I had a model pop-up box which contained a large form. The user could click a button to bring the form up, enter the details and then hit ok to close the form again. They could also go back at any time  and change the details they had entered in the form. My idea was to provide a cancel button so that if the user decided that they wanted to discard the changes they could hit this button and it would roll-back the form fields to their previous values.

This sounded like a prime candidate for the Clone function that Jquery provides. I could clone the form and if the user hit cancel I could just replace the current form with the cloned one and et voila the original values would be stored. Except that _DISASTER_ for some reason Jquery’s clone method doesn’t clone the select values.

There are 2 arguments for what should be done when you clone a form. One side argues that you should copy the elements in their ‘raw’ default state and the other side says you should copy the form, values and all. In an ideal world there should probably be a flag to select either but the current Jquery approach appear to be consistent, textfield values are copied over but the selects appear to be the only input type that doesn’t. (I’ll do a check later and test every input type to make sure).

Now this functionality was pretty fundamental to what I was doing so I spent a fair bit of time banging my head off the wall in frustration at this point. Later that night though I figured out that it would be really easy to fix such is the awesome power of Jquery and it’s so obvious that I don’t know what I was getting so het up about. But, to save anyone else from pulling their hair out – you can use this function to clone a form including the select values.

[sourcecode ]

function cloneForm(id, withEvents)
{
var clone = $(’#'+id).clone(withEvents);
var selvals = [];
$(’#'+id+” select”).each(function()
{
selvals.push($(this).val());
});
clone.find(”select”).each(

[/sourcecode]

The second argument to this function is a boolean that allows you to specify if you want the clone to retain any events that are attached.

1. 
   James Taylor said...
   11:02 am - April 16th, 2009

   This was very helpfull thank you.

   this also happens with hidden fields and the same technique doesn’t work.
   im new to jquery so any help is appreciated.

2. 
   admin said...
   1:11 pm - April 16th, 2009

   Hi James and thanks,

   I haven’t noticed hidden fields not cloning properly, I’ll try some tests later and check but in the meantime try changing the lines

   $(’#’+id+” select”).each(function()
   &
   clone.find(”select”).each(

   to

   $(’#’+id+”:input”).each(function()
   &
   clone.find(”:input”).each(

   This should copy over the values of all input types (select, text, checkboxes etc) over to the clone. It’s a little overkill but should do the job.

   Let me know if this fixes your problem

   Cheers

   Mark

3. 
   James Taylor said...
   2:57 pm - April 16th, 2009

   thanks for the help this worked perfectly.

   i also noticed that password fields were also affected but this resolves that also.