web-dev-qa-db-ja.com

jQueryまたはjavascriptでフォームフィールド値を複製する方法はありますか？

jQueryには、実際のフォームを問題なく複製するclone()関数がありますが、フォームに入力された値は保持されません。

これを回避する方法はありますか？

サンプルコードをいただければ幸いです。

jqueryformsclone
26
Fred

同じ問題、簡単な解決策に遭遇しました：

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

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

秘訣は、これによりDOMツリーの実際の「値」属性が変更されることです。そうでない場合、「オンザフライ」で入力したデータは「DOM」状態にのみ存在します。

26
sled

メモから抜け出して、ここに解決策があります。次の形式で：

<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は、textareasを含めて機能します。

$( '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/

8
hookedonwinter

クローンされていないtextarea値のもう1つの簡単な修正は、次のJavaScriptファイルをHTMLに含めることです。 https://github.com/spencertipping/jquery.fix.clone

クローンメソッドにパッチを適用するだけなので、ファイルをインクルードして、そこにあることを忘れることができます。どうやらselect値のクローン化にも問題があり、この同じファイルでその問題も修正されています。

このファイルのリンク元： http://bugs.jquery.com/ticket/3016 。バグは4歳です。

4
Ben

フィールド自体を複製する必要がある場合は、この小さな関数を確認してください relCopy

0
numediaweb

この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;
}
0
waza

このコードを使用して、textarea値をコピーします

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

この問題を見つけて、このラッパーを作成しました。

$.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 ); };
0
dee32