Konvertieren von Formulardaten in ein JavaScript-Objekt mit jQuery

Question

Wie kann ich alle Elemente meines Formulars in ein JavaScript-Objekt umwandeln?

Ich möchte eine Möglichkeit haben, automatisch ein JavaScript-Objekt aus meinem Formular zu erstellen, ohne jedes Element in einer Schleife durchlaufen zu müssen. Ich möchte keine Zeichenkette, wie sie von $('#formid').serialize(); noch will ich die Karte, die von $('#formid').serializeArray();

Answer 1

Von einigen ältere Antwort:

$('form input, form select').toArray().reduce(function(m,e){m[e.name] = $(e).val(); return m;},{})

Answer 2

const formData = new FormData(form);

let formDataJSON = {};

for (const [key, value] of formData.entries()) {

    formDataJSON[key] = value;
}

Answer 3

Einfachheit ist hier das Beste. Ich habe eine einfache Zeichenfolge mit einem regulären Ausdruck ersetzen, und sie funktionierte wie ein Charme so weit. Ich bin kein Experte für reguläre Ausdrücke, aber ich wette, Sie können auch sehr komplexe Objekte auffüllen.

var values = $(this).serialize(),
attributes = {};

values.replace(/([^&]+)=([^&]*)/g, function (match, name, value) {
    attributes[name] = value;
});

Answer 4

Ich habe ein Problem mit dem Code von Tobias Cohen gefunden (ich habe nicht genug Punkte, um ihn direkt zu kommentieren), der ansonsten bei mir funktioniert. Wenn Sie zwei Select-Optionen mit demselben Namen haben, beide mit value="", erzeugt der ursprüngliche Code "name":"" anstelle von "name":["",""]

Ich denke, dies kann durch Hinzufügen von " || o[this.name] == ''" zur ersten if-Bedingung behoben werden:

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] || o[this.name] == '') {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

Answer 5

Verwendung von macek's Lösung Ich änderte es mit der Art und Weise ASP.NET MVC behandelt ihre verschachtelten/komplexe Objekte auf dem gleichen Formular zu arbeiten. Alles, was Sie tun müssen, ist die Validierung Stück zu diesem ändern:

"validate": /^[a-zA-Z][a-zA-Z0-9_]*((?:\[(?:\d*|[a-zA-Z0-9_]+)\])*(?:\.)[a-zA-Z][a-zA-Z0-9_]*)*$/,

Dadurch werden Elemente mit Namen wie:

<input type="text" name="zooName" />

Und

<input type="text" name="zooAnimals[0].name" />