jQuery erstellt Objekt aus Formularfeldern

Question

Wie kann ich ein Objekt mit den Feldern und Werten eines Formulars erstellen?

wie diese hier:

{
  fields:
   {
      name: 'foo',
      email: 'foo@moo.com',
      comment: 'wqeqwtwqtqwtqwet'     

   }
}

wenn das Formular wie folgt aussieht:

<form>
  <input type="text" name="name" value="foo" />
  <input type="text" name="email" value="foo@moo.com" />
  <textarea name="comment">wqeqwtwqtqwtqwet</textarea>
</form>

Ich muss wissen, wie ich dies für jedes Formular mit einer einzigen Funktion tun kann, nicht nur für ein bestimmtes Formular.

Answer 1

Sie können dies tun:

var fields = {};
$("#theForm").find(":input").each(function() {
    // The selector will match buttons; if you want to filter
    // them out, check `this.tagName` and `this.type`; see
    // below
    fields[this.name] = $(this).val();
});
var obj = {fields: fields}; // You said you wanted an object with a `fields` property, so...

Beachten Sie, dass Formulare Felder mit sich wiederholenden Namen haben können, und dass das, was Sie vorhaben, dies nicht unterstützt. Außerdem ist die Bestellung von Feldern in HTML-Formularen kann erheblich sein. (Dies sind beides Gründe, die serializeArray so funktioniert.)

Beachten Sie, dass es in HTML üblich ist, deaktivierte Felder wegzulassen. Wenn Sie dies tun möchten, überprüfen Sie this.disabled bevor Sie den Wert ebenfalls erfassen.

---

Beachten Sie, dass die oben (vor zwei Jahren geschrieben) verwendet eine jQuery Pseudo-Selektor. Ich bin ein wenig überrascht, dass ich das geschrieben habe. Wie es in der Dokumentation für die :input Pseudo-Selektor bedeutet dies, dass jQuery den Selektor nicht an den Browser weitergeben kann. querySelectorAll (über die inzwischen fast alle Browser verfügen).

Heutzutage würde ich wahrscheinlich schreiben:

$("#theForm").find("input, textarea, select, button")...

... wenn ich Knöpfe wollte, oder wenn nicht, dann

$("#theForm").find("input, textarea, select")...

...und dann herausfiltern input[type="button"] y input[type="submit"] innerhalb der each . Z. B. (überhaupt keine Tasten):

$("#theForm").find("input, textarea, select").each(function() {
    var inputType = this.tagName.toUpperCase() === "INPUT" && this.type.toUpperCase();
    if (inputType !== "BUTTON" && inputType !== "SUBMIT") {
        // ...include it, either it's an `input` with a different `type`
        // or it's a `textarea` or a `select`...
    }
});

Answer 2

var inputs = $("form :input");
var obj = $.map(inputs, function(x, y) {
    return {
        Key: x.name,
        Value: $(x).val()
    };
});
console.log(obj);

Answer 3

Wie in einem Kommentar auf der http://api.jquery.com/serializeArray/ Seite, können Sie tun:

(function( $ ){
    $.fn.serializeJSON=function() {
        var json = {};
        jQuery.map($(this).serializeArray(), function(n, i){
            json[n['name']] = n['value'];
        });
        return json;
    };
})( jQuery );

Dann tun Sie das:

var obj = $('form').serializeJSON();

oder wenn Sie es brauchen mit Ihrem fields können Sie die Funktion ändern oder wie folgt vorgehen:

var obj = {fields: $('form').serializeJSON()};

Oder Sie können einfach serializeArray() wenn Sie dieses Format der Ausgabe nicht stört.

Answer 4

Hier ist eine einfache Lösung:

<a href="https://jsfiddle.net/ddan/rfesmgy9/" rel="nofollow noreferrer">See Demo</a>

$(".form-sample").serializeArray().map(function(x){data[x.name] = x.value;});

Answer 5

Jquery hat eine serialize()-Funktion für Froms wie $('#myform').serialize()

Ist es das, wonach Sie suchen?

aktualisieren: Ups, vielleicht versuchen Sie stattdessen serializeArray(), es sollte Ihnen ein Array von Name und Wert geben.