有沒有辦法在jQuery或JavaScript中克隆表單字段值？

Question

jQuery有一個clone()函數，可以毫無問題地克隆實際的表單，但它不保留任何已輸入到表單中的值。

有沒有辦法解決這個問題？

示例代碼將不勝感激。

Answer 1

從注意到干擾，這裏有一個解決方案。用下面的形式：

<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" /> 

這個jQuery的作品，包括文字區域：

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

    } 
) 

演示：http://jsfiddle.net/Jux3e/

Answer 2

你可以使用這個jQuery插件。

/** 
* clone element, including the textarea part 
*/ 


$.fn.clone2 = function(val1, val2) { 
    // ret for return value, cur for current jquery object 
    var ret, cur; 
    ret = $(this).clone(val1, val2); 
    cur = $(this); 

    // copy all value of textarea 
    ret.find('textarea').each(function() { 
     var value_baru; 

     // use name attribute as unique id 
     value_baru = sek.find('[name="$name"]'.replace('$name', $(this).attr('name'))) 
         .val(); 

     // set the new value to the textarea 
     $(this).val(value_baru); 
    }); 

    // return val 
    return ret; 
} 

Answer 3

遇到同樣的問題，簡單的解決方案：

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

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

的訣竅是，這將改變在DOM樹中的實際「價值」屬性，否則你上的輸入」數據-fly」只存在於DOM '國家'

Answer 4

發現了這個問題，並寫了這個包裝：

$.fn.cloneField = function(withDataAndEvents) { 
var clones = []; 
this.each(function(){ 
    var cln = $(this).clone(withDataAndEvents); 
    cln.val($(this).val()); 
    clones.push(cln.get(0)); 
}); 
return jQuery(clones); }; 

Answer 5

如果你需要複製該領域本身，看看這個自帶的功能relCopy

Answer 6

另一個簡單的辦法不被複制的文本域值是在HTML下面的JavaScript文件：https://github.com/spencertipping/jquery.fix.clone

它只是修補的克隆方法所以你可以包含文件，然後忘記它在那裏。顯然克隆選擇值也有問題，並且這個文件也修復了這個問題。

此文件關聯到：http://bugs.jquery.com/ticket/3016。該錯誤是4歲。

Answer 7

使用此代碼複製textarea的值

clonedObject.find(textareaObject).val(originalObject.find(textareaObject).val());