Is there a way to clone form field values in jQuery or javascript?

jquery forms clone

28,999

Solution 1

ran into the same problem, simple solution:

// touch all input values
$('input:text').each(function() {
    $(this).attr('value', $(this).val());
});

var clones = $('input:text').clone();

the trick is that this will change the actual 'value' attribute in the DOM tree, otherwise the data you enter 'on-the-fly' only exists in the DOM 'state'

Solution 2

Stemming from the notes, here's a solution. With the following form:

<form id="old">
    <textarea>Some Value</textarea>
    <input type="text" value="Some Value" />
    <input type="checkbox" value="bob" checked />
    <br />
</form>

<input type="button" value="Clone" id="clone" />

This jQuery works, including the textareas:

$( 'input#clone' ).click(
    function()
    {
      $( 'form#old textarea' ).text( $( 'form#old textarea' ).val() )
      $("form#old").clone().attr( 'id', 'new_form' ).appendTo("body")

    }
)

Demo: http://jsfiddle.net/Jux3e/

Solution 3

Another easy fix for the textarea values not being cloned is to include the following JavaScript file in your HTML: https://github.com/spencertipping/jquery.fix.clone

It just patches the clone method so you can include the file and then forget it's there. Apparently there is a problem with cloneing select values too and this same file fixes that problem as well.

This file was linked to from: http://bugs.jquery.com/ticket/3016. The bug is 4 years old.

28,999

Fred

Updated on July 09, 2022

Comments

Fred almost 2 years

jQuery has a clone() function that clones the actual form with no problem, but it doesn't preserve any values that have been entered into the form.

Is there a way to get around this?

Sample code would be much appreciated.
- Nick Craver almost 14 years
  
  Can you give a bit more context? A quick test has no issues here: jsfiddle.net/meGyg
- hookedonwinter almost 14 years
  
  I think the issue is if you change the data via the form, and then try to clone it. Forked your fiddle: jsfiddle.net/F9aWu Try to change the form, then click clone.
- hookedonwinter almost 14 years
  
  ya @[nick craver]'s solution works fine except for the textarea part
- Chance almost 14 years
  
  The initial representation of the form controls goes out of sync with the DOM when we start modifying properties such as value, and checked directly. When we clone a node, the representation of each DOM node gets copied which does not include object properties such as value. One solution is to copy the relevant properties - (value, checked, selected) for each form control into the cloned nodes. The other is to modify the element whenever making a change. So instead of element.val('something'), do element.setAttribute('value', 'something') which should work find when cloning.
Chris Stryczynski almost 7 years

Would this not need to be escaped?
sled almost 7 years

@ChrisStryczynski I don't think so, text input can't display HTML, you're setting it to the value it already had before, and quotes are not an issue because you are setting a string attribute value instead of printing plain HTML code.
Malcolm Salvador almost 7 years

this is effective for input:text, but what about checkboxes, radio buttons, text areas and the like?