Füllen Sie ein Formular mit Daten aus einem assoziativen Array mit jQuery

Question

Letzte Mal I asked about the reverse process, und erhielt einige sehr effiziente Antworten. Ich strebe hier nach den wenigsten Codezeilen. Ich habe eine Form von Feldern und ein assoziatives Array im Format {fieldname: data}, ich möchte ein entsprechendes Formular damit füllen.

Answer 1

Als ich dies für ein tat Projekt, fand ich, dass die Einstellung der Wert von Auswahlfeldern, Optionsfeldern und Kontrollkästchen komplexer Code, etwas in der folgenden Richtung erforderlich:

Ich habe diesen Code nicht getestet, also hoffe ich, dass es keine dummen Syntaxfehler gibt, die ich hätte fangen sollen. Hoffe das hilft.

Ich bin nicht erlaubt, die Kommentare hier (noch) zu kommentieren, so .... Wie im Kommentar erwähnt, behandelt die jQuery. Val (val) -Methode Einstellung Radio Optionsfelder, Kontrollkästchen und wählt.

Sie müssen weiterhin select [name = ...] in Ihr jQuery-Auswahlmuster einfügen oder die Auswahlelemente werden nicht aktualisiert.

Answer 2

Wenn Ihr Formularelemente haben ihre ID an den Feldnamen gesetzt:

$.each(myAssocArry, function(i,val) { $('#'+i).val(val); }); 

Answer 3

Oder ähnlich dem vorherigen Vorschlag anstelle von ids die Feldnamen:

$.each(data, function(name,value) { 
    $("input[name='" + name + "']").val(value); 
}); 

Answer 4

Ich habe nicht gesehen jQuery handle Übergabe eines einzelnen (Nicht-Array) Wert in val() für eine Radio-oder Kontrollkästchen-Eingabe. Sie müssen sicherstellen, dass der einzelne Wert in ein Array eingeschlossen wird.

Ich wollte die Werte der button-ish Eingänge auch nicht ändern, also filtere ich diese raus.

Hier ist eine Funktion, die das Array-Wrapping, Button-Filtering behandelt und auch die Eingabeauswahl auf ein bestimmtes Formularelement beschränkt. Der Formularparameter ist optional. Wenn sie aus/null/undefiniert bleibt, werden alle Eingaben auf der Seite ausgewählt.

function populateForm(data, form) { 
    $.each(data, function(name, value) { 
     var input = $(":input[name='" + name + "']:not(:button,:reset,:submit,:image)", form); 
     input.val((!$.isArray(value) && (input.is(':checkbox') || input.is(':radio'))) ? [ value ] : value); 
    }); 
};