Gibt es eine Möglichkeit, Formularfeldwerte in jQuery oder Javascript zu klonen?

Question

JQuery hat eine clone() Funktion, die das tatsächliche Formular problemlos klonen kann, jedoch werden keine Werte beibehalten, die in das Formular eingegeben wurden.

Gibt es einen Weg, dies zu umgehen?

Beispielcode wäre sehr hilfreich.

Answer 1

Bin auf dasselbe Problem gestoßen, einfache Lösung:

// Alle Eingabewerte berühren
$('input:text').each(function() {
    $(this).attr('value', $(this).val());
});

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

Der Trick besteht darin, dass dadurch das tatsächliche 'value'-Attribut im DOM-Baum geändert wird, da die Daten, die Sie 'on-the-fly' eingeben, sonst nur im DOM-'Zustand' existieren

Answer 2

Ausgehend von den Notizen hier eine Lösung. Mit dem folgenden Formular:

    Einiger Wert

Dieses jQuery funktioniert, einschließlich der Textareas:

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

    }
)

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

Answer 3

Ein weiterer einfacher Fix für das Problem, dass die Textarea-Werte nicht geklont werden, besteht darin, die folgende JavaScript-Datei in Ihren HTML-Code einzubinden: https://github.com/spencertipping/jquery.fix.clone

Es patcht einfach die Clone-Methode, damit Sie die Datei einbinden können und dann vergessen können, dass sie da ist. Anscheinend gibt es auch ein Problem mit dem Klonen von Select-Werten, und dieselbe Datei behebt auch dieses Problem.

Diese Datei wurde von hier verlinkt: http://bugs.jquery.com/ticket/3016. Der Bug ist 4 Jahre alt.

Answer 4

Sie können dieses jQuery-Plugin verwenden.

/**
 * Element klonen, einschließlich des Textarea-Teils
 */

$.fn.clone2 = function(val1, val2) {
    // ret für Rückgabewert, cur für aktuelles jQuery-Objekt
    var ret, cur;
    ret = $(this).clone(val1, val2);
    cur = $(this);

    // Kopieren des Werts aller Textareas
    ret.find('textarea').each(function() {
        var value_baru;

        // Verwendung des Namen-Attributs als eindeutige ID
        value_baru = sek.find('[name="$name"]'.replace('$name', $(this).attr('name')))
                        .val();

        // den neuen Wert im Textfeld setzen
        $(this).val(value_baru);
    });

    // Rückgabewert zurückgeben
    return ret;
}

Answer 5

Ich habe dieses Problem gefunden und diesen Wrapper geschrieben:

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