Wie kann ich mit JavaScript / jQuery Formulardaten abrufen?

404

Gibt es eine einfache, einzeilige Möglichkeit, die Daten eines Formulars so abzurufen, wie es wäre, wenn es nur auf klassische HTML-Weise übermittelt würde?

Zum Beispiel:

<form>
    <input type="radio" name="foo" value="1" checked="checked" />
    <input type="radio" name="foo" value="0" />
    <input name="bar" value="xxx" />
    <select name="this">
        <option value="hi" selected="selected">Hi</option>
        <option value="ho">Ho</option>
</form>

Ausgabe:

{
    "foo": "1",
    "bar": "xxx",
    "this": "hi"
}

So etwas ist zu einfach, da es keine (korrekten) Textbereiche, Auswahlmöglichkeiten, Optionsfelder und Kontrollkästchen enthält:

$("#form input").each(function () {
    data[theFieldName] = theFieldValue;
});
Bart van Heukelom
quelle
3
Eine ähnliche Frage: stackoverflow.com/questions/169506/…
Marcelo Rodovalho

Antworten:

431
$('form').serialize() //this produces: "foo=1&bar=xxx&this=hi"

Demo

Chelmertz
quelle
15
Schließen, aber vielleicht etwas, das ein Array mit Schlüssel-Wert-Paaren anstelle einer einzelnen Zeichenfolge zurückgibt?
Bart van Heukelom
80
Nvm, fand es in den Kommentaren für die Funktion serialize (). Es heißt serializeArray. Es gibt ein Array von Arrays zurück (die einen Eintrag "name" und "value" enthalten), aber das sollte leicht zu transformieren sein.
Bart van Heukelom
22
Und unter Verwendung der Unterstrichbibliothek kann transformiert werden mit:_.object($("#myform").serializeArray().map(function(v) {return [v.name, v.value];} ))
MhdSyrwan
8
@BartvanHeukelom Ich weiß, dass dies 4 Jahre später ist, aber .serializeArray () wird ein Array zurückgeben.
TJ WealthEngine API Evangelist
6
Stellen Sie sicher, dass jedes Eingabe-Tag ein Namensattribut enthält, da sonst nichts zurückgegeben wird.
Eugene Kulabuhov
505

Verwenden Sie $('form').serializeArray(), um ein Array zurückzugeben :

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

Eine andere Option ist $('form').serialize(), die eine Zeichenfolge zurückgibt :

"foo=1&bar=xxx&this=hi"

Schauen Sie sich diese jsfiddle-Demo an

Paul
quelle
91
serializeArraywäre so viel nützlicher, wenn es ein Objekt mit Schlüssel-Wert-Paaren zurückgeben würde
GetFree
8
Ich bin damit einverstanden, dass ein Objekt ideal wäre. Es gibt jedoch ein Problem: Ein Schlüssel darf mehrere Werte haben. Würden Sie ein Schlüsselobjekt "Array of Values" oder ein Schlüsselobjekt "First Value" oder etwas anderes zurückgeben? Ich denke, jQuery Jungs haben keine der oben genannten gewählt :)
Paul
Beachten Sie, dass ein Problem mit mehreren Werten (wie oben erwähnt @Paul), Kontrollkästchen und mehreren Eingaben mit name="multiple[]"nicht funktioniert. Die Lösung für die POST-Methode ist dieselbe. Verwenden Sie einfach $ ('form'). Serialize (). Außerdem ist die POST-Methode nicht wie GET in den meisten Browsern auf 2000 Zeichen begrenzt und kann daher auch für ziemlich große Datenmengen verwendet werden.
Artru
Bitte beachten Sie auch, dass die Eingabe ein nameAttribut haben muss, um einen Wert aus einer Formulareingabe aufzuzeichnen .
Chris - Jr
@ GetFree warum nicht einfach die jQuery-Map-Funktion verwenden? Funktion getFormData (form) {var rawJson = form.serializeArray (); var model = {}; $ .map (rawJson, Funktion (n, i) {model [n ['name']] = n ['value'];}); Rückgabemodell; }
Tom McDonough
196

Aktualisierte Antwort für 2014: HTML5 FormData erledigt dies

var formData = new FormData(document.querySelector('form'))

Sie können formData dann genau so veröffentlichen, wie es ist - es enthält alle Namen und Werte, die im Formular verwendet werden.

Mikemaccana
quelle
13
Plus eins als FormData ist gut und nützlich, aber es ist erwähnenswert, dass es nicht ganz so einfach ist, die Daten in FormData zu lesen (siehe stackoverflow.com/questions/7752188/… )
StackExchange What The Heck
1
Beachten Sie, dass FormData Teil der erweiterten XMLHttpRequest-Funktionen ist (früher als XMLHttpRequest Level 2 bekannt). Sie müssen sich daher auf eine Polyfüllung für Internet Explorer <10 verlassen. Caniuse.com/#feat=xhr2
Pier-Luc Gendreau
3
@ Yochannah, nicht so. Sicher, man kann nicht einfach wie ein normales Objekt auf die Daten zugreifen und sie bearbeiten, aber es ist immer noch trivial, die Daten abzurufen. Überprüfen Sie die entries()Methode [MDN-Seite ].
Web und Flow
@Web and Flow, danke, dass du darauf hingewiesen hast! Ich liebe es, wenn Browser neue und nützliche Funktionen hinzufügen :) Zeiten, in denen sie sich ändern.
StackExchange What The Heck
Ich versuche, mit FormData ein Objekt an mein Flask-Python-Skript zu senden, aber es scheint nicht als normales Anforderungsobjekt zu erscheinen, das ich entpacken kann. Kann jemand auf eine Erklärung spezieller Schritte verweisen, um dies auf der Serverseite zu handhaben? Dort scheint es mir leer zu sein.
Manisha
181

Gibt basierend auf jQuery.serializeArraySchlüssel-Wert-Paare zurück.

var data = $('#form').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});
Neuront
quelle
12
Schlüssel-Wert-Paare hier, Leute, alle, komm her! Es ist golden !!! Vielen Dank! Wenn ich einen Wert eines Elements mit dem Namen "Einzelhändler" möchte, mache ich dieses console.log ($ ('# form'). SerializeArray (). Reduce (function (obj, item) {obj [item.name] = item. value; return obj;}, {}) ['einzelhändler']);
Jewgenij Afanasjew
Ich habe gestern eine JQuery-Methode erstellt, die auf dieser Antwort basiert, aber mit Mehrfachauswahl- und Eingabearrays (mit dem Namen 'example []') arbeitet. Sie finden es in meiner Antwort unten. Wie auch immer, guter Ansatz Neuront, danke! :)
manuman94
Dieser hat mir von allen Antworten am besten gefallen!
VPetrovic
Diese IMHO ist die beste Antwort!
Rahul
74
document.querySelector('form').addEventListener('submit', (e) => {
  const formData = new FormData(e.target);
  // Now you can use formData.get('foo'), for example.
  // Don't forget e.preventDefault() if you want to stop normal form .submission
});

Dies ist eine pingelige Antwort, aber lassen Sie mich erklären, warum dies eine bessere Lösung ist:

  • Wir behandeln ein Formular ordnungsgemäß und nicht per Knopfdruck. Einige Leute drücken gerne die Eingabetaste auf Felder. Einige Leute verwenden alternative Eingabegeräte wie Spracheingabegeräte oder andere Eingabehilfen. Wenn Sie das Formular abschicken, lösen Sie es für alle richtig.

  • Wir untersuchen die Formulardaten für das tatsächlich übermittelte Formular. Wenn Sie Ihre Formularauswahl später ändern, müssen Sie die Auswahl nicht für alle Felder ändern. Darüber hinaus haben Sie möglicherweise mehrere Formulare mit denselben Eingabenamen. Keine Notwendigkeit, mit übermäßigen IDs zu disambiguieren und was nicht, verfolgen Sie einfach die Eingaben basierend auf dem eingereichten Formular. Auf diese Weise können Sie auch einen einzelnen Ereignishandler für mehrere Formulare verwenden, wenn dies für Ihre Situation angemessen ist.

  • Die FormData-Oberfläche ist ziemlich neu, wird aber von Browsern gut unterstützt. Es ist eine großartige Möglichkeit, diese Datenerfassung zu erstellen, um die tatsächlichen Werte des Formulars zu ermitteln. Ohne sie müssen Sie alle Elemente (z. B. mit form.elements) durchlaufen und herausfinden, was überprüft wurde, was nicht, welche Werte usw. sind. Völlig möglich, wenn Sie alte Browserunterstützung benötigen, aber die FormData Schnittstelle ist einfacher.

  • Ich verwende hier ES6 ... keineswegs erforderlich. Ändern Sie es daher wieder in ES5-kompatibel, wenn Sie Unterstützung für alte Browser benötigen.

Brad
quelle
Zu Ihrer Information, FormData-Objekte machen ihre Werte nicht verfügbar. Um ein einfaches Objekt daraus zu erhalten, siehe stackoverflow.com/questions/41431322/…
phil294
2
@Blauhirn Unsinn, natürlich legen sie die Werte offen. Der Code in meiner Antwort funktioniert. Du solltest es versuchen. Hier habe ich eine Geige für Sie gemacht: jsfiddle.net/zv9s1xq5 Wenn Sie einen Iterator möchten, verwenden Sie formData.entries().
Brad
Ich weiß, dass es funktioniert, aber die Eigenschaften sind nicht per Schlüssel zugänglich. Zum Beispiel formData.foo ist undefiniert. Wie aus Ihrer Antwort hervorgeht, .get() muss für das gerufen werden, was ich für unpraktisch halte. Vielleicht ist "nicht aussetzen" auf die falsche Weise gekommen. Um so etwas wie { foo: 'bar' }aus einem submitEreignis zu generieren , müssen Sie diese manuell durchlaufen. Daher die . To get a plain object from it, see [link].
Phil294
1
@Blauhirn Da liegst du falsch. XMLHttpRequest unterstützt FormData direkt. xhr.send(formData);
Brad
1
@Blauhirn JSON.stringify([...formData]) Oder, wenn Sie möchten, dass Ihre Schlüssel / Werte getrennt werden ... [...formData].reduce((prev, cur) => { prev[cur[0]] = cur[1]; return prev;}, {})
Brad
25

Verwenden Sie .serializeArray (), um die Daten im Array-Format abzurufen und anschließend in ein Objekt zu konvertieren:

function getFormObj(formId) {
    var formObj = {};
    var inputs = $('#'+formId).serializeArray();
    $.each(inputs, function (i, input) {
        formObj[input.name] = input.value;
    });
    return formObj;
}
Nils
quelle
Dies überschreibt meine Kontrollkästchen, wenn ich so etwas habe <input type="checkbox" name="someList" value="one" /> <input type="checkbox" name="someList" value="two" />. Wenn beide aktiviert sind, enthält das Objekt nur den zweiten Kontrollkästchenwert.
Dmathisen
2
Ist das nicht ein Fall, wo someListsollte sein type="radio"?
Dylanjameswagner
upvote, weil die akzeptierte Antwort kein Objekt mit den Schlüsseln zurückgibt als:name:value
Matt-the-Marxist
24

Hier ist eine wirklich einfache und kurze Lösung, für die Jquery nicht einmal erforderlich ist.

var formElements=document.getElementById("myForm").elements;    
var postData={};
for (var i=0; i<formElements.length; i++)
    if (formElements[i].type!="submit")//we dont want to include the submit-buttom
        postData[formElements[i].name]=formElements[i].value;
Clox
quelle
1
Dies funktioniert nicht mit Optionsfeldern: Die letzte Option ist immer die, in der gespeichert ist postData.
Kyle Falconer
3
Vielen Dank, dass Sie uns eine uneingeschränkte Antwort gegeben haben.
Glen Pierce
24

Es ist 2019 und es gibt einen besseren Weg, dies zu tun:

const form = document.querySelector('form');
const data = new URLSearchParams(new FormData(form).entries());

oder wenn Sie stattdessen ein einfaches Objekt möchten

const form = document.querySelector('form');
const data = Object.fromEntries(new FormData(form).entries());

Beachten Sie jedoch, dass dies nicht mit doppelten Schlüsseln funktioniert, wie Sie sie von Mehrfachauswahl- und doppelten Kontrollkästchen mit demselben Namen erhalten.

fringd
quelle
Total. Ich habe zwar kein Array für eine Liste von Eingaben erhalten, die alle den gleichen Namen haben, was bedeutete, dass ich document.getElementsByClassNameeine for-Schleife verwenden musste, aber hey, immer noch schöner, als jQuery usw. zu benötigen
alphanumeric0101
1
Diese Antwort ist mein Favorit. Aber es sollte document.querySelectorstatt nur lesen querySelector.
Adabru
Hinweis "FormData verwendet nur Eingabefelder, die das Namensattribut verwenden" - von MDN
binaryfunt
16
$('#myform').serialize();
Andy Baird
quelle
13

Ich benutze das:

jQuery Plugin

(function($){
  $.fn.getFormData = function(){
    var data = {};
    var dataArray = $(this).serializeArray();
    for(var i=0;i<dataArray.length;i++){
      data[dataArray[i].name] = dataArray[i].value;
    }
    return data;
  }
})(jQuery);

HTML-Formular

<form id='myform'>
  <input name='myVar1' />
  <input name='myVar2' />
</form>

Holen Sie sich die Daten

var myData = $("#myForm").getFormData();
Dustin Poissant
quelle
Beachten Sie, dass dieses Plugin nicht in Fällen funktioniert, in denen mehrere Formulareingabeeinträge mit demselben Namen vorhanden sind. Der letzte Eintrag würde den vorherigen ersetzen, während das erwartete Verhalten darin bestehen würde, alle Werte alsArray
Milli
1
Nur eine Anmerkung, dass ich ein Jahr später denke, dass dies eine schreckliche Antwort ist und niemand sie verwenden sollte. Wie der vorherige Kommentar sagt, würden Dinge wie Optionsfelder nicht funktionieren. Es gibt oben bessere Antworten, verwenden Sie stattdessen eine davon.
Dustin Poissant
12
$("#form input, #form select, #form textarea").each(function() {
 data[theFieldName] = theFieldValue;
});

Ansonsten möchten Sie sich vielleicht serialize () ansehen .

Pixeline
quelle
11

Hier ist eine funktionierende JavaScript-Implementierung, die Kontrollkästchen, Optionsfelder und Schieberegler korrekt verarbeitet (wahrscheinlich auch andere Eingabetypen, aber ich habe nur diese getestet).

function setOrPush(target, val) {
    var result = val;
    if (target) {
        result = [target];
        result.push(val);
    }
    return result;
}

function getFormResults(formElement) {
    var formElements = formElement.elements;
    var formParams = {};
    var i = 0;
    var elem = null;
    for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
            case 'submit':
                break;
            case 'radio':
                if (elem.checked) {
                    formParams[elem.name] = elem.value;
                }
                break;
            case 'checkbox':
                if (elem.checked) {
                    formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
                }
                break;
            default:
                formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
    }
    return formParams;
}

Arbeitsbeispiel:

    function setOrPush(target, val) {
      var result = val;
      if (target) {
        result = [target];
        result.push(val);
      }
      return result;
    }

    function getFormResults(formElement) {
      var formElements = formElement.elements;
      var formParams = {};
      var i = 0;
      var elem = null;
      for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
          case 'submit':
            break;
          case 'radio':
            if (elem.checked) {
              formParams[elem.name] = elem.value;
            }
            break;
          case 'checkbox':
            if (elem.checked) {
              formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
            }
            break;
          default:
            formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
      }
      return formParams;
    }

    //
    // Boilerplate for running the snippet/form
    //

    function ok() {
      var params = getFormResults(document.getElementById('main_form'));
      document.getElementById('results_wrapper').innerHTML = JSON.stringify(params, null, ' ');
    }

    (function() {
      var main_form = document.getElementById('main_form');
      main_form.addEventListener('submit', function(event) {
        event.preventDefault();
        ok();
      }, false);
    })();
<form id="main_form">
  <div id="questions_wrapper">
    <p>what is a?</p>
    <div>
      <input type="radio" required="" name="q_0" value="a" id="a_0">
      <label for="a_0">a</label>
      <input type="radio" required="" name="q_0" value="b" id="a_1">
      <label for="a_1">b</label>
      <input type="radio" required="" name="q_0" value="c" id="a_2">
      <label for="a_2">c</label>
      <input type="radio" required="" name="q_0" value="d" id="a_3">
      <label for="a_3">d</label>
    </div>
    <div class="question range">
      <label for="a_13">A?</label>
      <input type="range" required="" name="q_3" id="a_13" min="0" max="10" step="1" list="q_3_dl">
      <datalist id="q_3_dl">
        <option value="0"></option>
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
        <option value="4"></option>
        <option value="5"></option>
        <option value="6"></option>
        <option value="7"></option>
        <option value="8"></option>
        <option value="9"></option>
        <option value="10"></option>
      </datalist>
    </div>
    <p>A and/or B?</p>
    <div>
      <input type="checkbox" name="q_4" value="A" id="a_14">
      <label for="a_14">A</label>
      <input type="checkbox" name="q_4" value="B" id="a_15">
      <label for="a_15">B</label>
    </div>
  </div>
  <button id="btn" type="submit">OK</button>
</form>
<div id="results_wrapper"></div>

bearbeiten:

Wenn Sie nach einer vollständigeren Implementierung suchen, schauen Sie sich diesen Abschnitt des Projekts an, für das ich dies gemacht habe . Ich werde diese Frage irgendwann mit der vollständigen Lösung aktualisieren, die ich mir ausgedacht habe, aber vielleicht ist dies für jemanden hilfreich.

Kyle Falconer
quelle
1
Schöne Lösung :) Ich habe allerdings einen Fehler mit der Funktion setOrPush gefunden. Es enthält keine Überprüfung, ob das Ziel bereits ein Array ist. Bei mehreren aktivierten Kontrollkästchen mit demselben Namen wird ein tief verschachteltes Array erstellt.
Wouter van Dam
@ KyleFalconer Schön! Warum haben Sie die Schaltkästen für Radio und Kontrollkästchen nicht zusammengeführt - sie funktionieren ordnungsgemäß (ich denke).
Ethan
@Ethan Das liegt daran, dass in einem Kontrollkästchen mehrere Werte ausgewählt sein können und in einem Radio immer nur ein Wert ausgewählt werden kann. Daher ändert sich die Art und Weise, wie ich den Wert speichere.
Kyle Falconer
@ KyleFalconer Ja, das verstehe ich. Der Code für die Behandlung von 'Checkbox' berücksichtigt auch die einzige mögliche Auswahl für 'Radio' aufgrund der 'SetOrPush'-Routine.
Ethan
@ Ethan Oh, ich glaube ich weiß was du sagst. Es könnte so oder so gemacht werden, aber ich denke, ich habe es so gemacht, nur weil ich nur einen Wert wollte, kein Array von Werten.
Kyle Falconer
9

Wenn Sie jQuery verwenden, finden Sie hier eine kleine Funktion, die genau das tut, wonach Sie suchen.

Fügen Sie Ihrem Formular zunächst eine ID hinzu (es sei denn, es ist das einzige Formular auf der Seite, dann können Sie einfach 'Formular' als Dom-Abfrage verwenden).

<form id="some-form">
 <input type="radio" name="foo" value="1" checked="checked" />
 <input type="radio" name="foo" value="0" />
 <input name="bar" value="xxx" />
 <select name="this">
  <option value="hi" selected="selected">Hi</option>
  <option value="ho">Ho</option>
</form>

<script>
//read in a form's data and convert it to a key:value object
function getFormData(dom_query){
    var out = {};
    var s_data = $(dom_query).serializeArray();
    //transform into simple data/value object
    for(var i = 0; i<s_data.length; i++){
        var record = s_data[i];
        out[record.name] = record.value;
    }
    return out;
}

console.log(getFormData('#some-form'));
</script>

Die Ausgabe würde folgendermaßen aussehen:

{
 "foo": "1",
 "bar": "xxx",
 "this": "hi"
}
RobKohr
quelle
7

Sie können auch die FormData- Objekte verwenden. Mit dem FormData-Objekt können Sie eine Reihe von Schlüssel / Wert-Paaren kompilieren, die mit XMLHttpRequest gesendet werden sollen. Es ist in erster Linie für das Senden von Formulardaten vorgesehen, kann jedoch unabhängig von Formularen verwendet werden, um verschlüsselte Daten zu übertragen.

        var formElement = document.getElementById("myform_id");
        var formData = new FormData(formElement);
        console.log(formData);
numediaweb
quelle
Danke, aber was ist, wenn Sie keinen Ausweis haben? Was ist, wenn Sie ein Formular als JQuery-Objekt haben? var form = $ (this) .closest ('form'); ? Sollte var formElement = document.getElementById (form [0]); stattdessen deine erste Linie arbeiten? Nun, es funktioniert leider nicht. Wissen Sie, warum?
Jewgenij Afanasjew
Tatsächlich werden die FormData nicht von allen Browsern unterstützt :( Verwenden Sie also besser einen anderen Ansatz
numediaweb
Vielen Dank. Ich habe das neueste Chrom verwendet und es hat immer noch nicht funktioniert. Also ging ich mit #neuront Antwort von oben.
Jewgenij Afanasjew
6

Dadurch werden alle Formularfelder an das JavaScript-Objekt "res" angehängt:

var res = {};
$("#form input, #form select, #form textarea").each(function(i, obj) {
    res[obj.name] = $(obj).val();
})
Gamliela
quelle
Wahrscheinlich, weil genau diese Antwort bereits im Jahr 2010 veröffentlicht wurde.
Nathanvda
Das wusste ich nicht. Für eine so kurze Antwort ist dies nicht überraschend. Und trotzdem, wo ist die Referenz?
Gamliela
Ernsthaft? Sie glauben meinem Kommentar ohne die Referenz nicht und können nicht einmal die Liste der Antworten durchsehen, um festzustellen, ob sie gleich sind? stackoverflow.com/a/2276469/216513
nathanvda
Ich dachte, du meinst eine Antwort auf eine andere Frage. Ich erinnere mich jetzt nicht an die Details und meine Gründe; Vielleicht, weil es nicht genau dasselbe ist
Gamliela
1
Perfekte Antwort für jemanden, der möchte, dass es für die Eingabe funktioniert, wählen Sie mehrere und Textbereich. Da Sie bei der Serialisierung nicht alle Elemente auswählen, die im Auswahl-Tag ausgewählt sind. Mit .val () erhalten Sie jedoch genau das, was Sie als Array wünschen. Einfache, direkte Antwort.
Sailesh Kotha
6

Ich habe die Antwort beigefügt, um auch das gewünschte Objekt zurückzugeben.

function getFormData(form) {
var rawJson = form.serializeArray();
var model = {};

$.map(rawJson, function (n, i) {
    model[n['name']] = n['value'];
});

return model;
}
Tom McDonough
quelle
Dies behandelt Arrays überhaupt nicht. foo[bar][] = 'qux'sollte zu serialisieren { foo: { bar: [ 'qux' ] } }.
Amphetamachine
6

Basierend auf der Antwort von Neuront habe ich eine einfache JQuery-Methode erstellt, die die Formulardaten in Schlüssel-Wert-Paaren abruft, aber für Mehrfachauswahl und für Array-Eingaben mit name = 'example []' funktioniert.

So wird es verwendet:

var form_data = $("#form").getFormObject();

Nachfolgend finden Sie ein Beispiel für die Definition und Funktionsweise.

// Function start
$.fn.getFormObject = function() {
    var object = $(this).serializeArray().reduce(function(obj, item) {
        var name = item.name.replace("[]", "");
        if ( typeof obj[name] !== "undefined" ) {
            if ( !Array.isArray(obj[name]) ) {
                obj[name] = [ obj[name], item.value ];
            } else {
               obj[name].push(item.value);
            }
        } else {
            obj[name] = item.value;
        }
        return obj;
    }, {});
    return object;
}
// Function ends

// This is how it's used
$("#getObject").click( function() {
  var form_data = $("#form").getFormObject();
  console.log(form_data);
});
/* Only to make view better ;) */
#getObject {
  padding: 10px;
  cursor:pointer;
  background:#0098EE;
  color:white;
  display:inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form id="form">
  <input type="text" name="text" value="Hola amigo" /> 
  
  <input type="text" name="text_array[]" value="Array 1" /> 
  <input type="text" name="text_array[]" value="Array 2" /> 
  <input type="text" name="text_array[]" value="Array 3" /> 
  
  <select name="multiselect" multiple>
    <option name="option1" selected> option 1 </option>
    <option name="option2" selected> option 2 </option>
  </select>
  
  <input type="checkbox" name="checkbox" value="checkbox1" checked/>
  <input type="checkbox" name="checkbox" value="checkbox2" checked/>
  
  <input type="radio" name="radio" value="radio1" checked/>
  <input type="radio" name="radio" value="radio2"/>

</form>

<div id="getObject"> Get object (check the console!) </div>

manuman94
quelle
5
var formData = new FormData($('#form-id'));
params   = $('#form-id').serializeArray();

$.each(params, function(i, val) {
    formData.append(val.name, val.value);
});
George John
quelle
4
function getFormData($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
        if(indexed_array[n['name']] == undefined){
            indexed_array[n['name']] = [n['value']];
        }else{
            indexed_array[n['name']].push(n['value']);
        }
    });

    return indexed_array;
}
郭润民
quelle
4

Mit dieser Funktion können Sie ein Objekt oder einen JSON aus dem Formular haben.

zur Verwendung:

var object = formService.getObjectFormFields("#idform");

 function  getObjectFormFields(formSelector)
        {
            /// <summary>Função que retorna objeto com base nas propriedades name dos elementos do formulário.</summary>
            /// <param name="formSelector" type="String">Seletor do formulário</param>

            var form = $(formSelector);

            var result = {};
            var arrayAuxiliar = [];
            form.find(":input:text").each(function (index, element)
            {
                var name = $(element).attr('name');

                var value = $(element).val();
                result[name] = value;
            });

            form.find(":input[type=hidden]").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = value;
            });


            form.find(":input:checked").each(function (index, element)
            {
                var name;
                var value;
                if ($(this).attr("type") == "radio")
                {
                    name = $(element).attr('name');
                    value = $(element).val();
                    result[name] = value;
                }
                else if ($(this).attr("type") == "checkbox")
                {
                    name = $(element).attr('name');
                    value = $(element).val();
                    if (result[name])
                    {
                        if (Array.isArray(result[name]))
                        {
                            result[name].push(value);
                        } else
                        {
                            var aux = result[name];
                            result[name] = [];
                            result[name].push(aux);
                            result[name].push(value);
                        }

                    } else
                    {
                        result[name] = [];
                        result[name].push(value);
                    }
                }

            });

            form.find("select option:selected").each(function (index, element)
            {
                var name = $(element).parent().attr('name');
                var value = $(element).val();
                result[name] = value;

            });

            arrayAuxiliar = [];
            form.find("checkbox:checked").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = arrayAuxiliar.push(value);
            });

            form.find("textarea").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = value;
            });

            return result;
        }

Marcos Costa
quelle
2
Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen. Nur-Link-Antworten können ungültig werden, wenn sich die verknüpfte Seite ändert. - Aus der Bewertung
Wahyu Kristianto
Aber dieser Link hat eine Funktion, um ihm zu helfen (glaube ich). Aber ich werde den Code beim nächsten Mal eingeben.
Marcos Costa
3

Ich habe eine Bibliothek geschrieben, um genau dieses Problem zu lösen: JSONForms . Es nimmt eine Form an, geht jede Eingabe durch und erstellt ein JSON-Objekt, das Sie leicht lesen können.

Angenommen, Sie haben das folgende Formular:

<form enctype='application/json'>
  <input name='places[0][city]' value='New York City'>
  <input type='number' name='places[0][population]' value='8175133'>
  <input name='places[1][city]' value='Los Angeles'>
  <input type='number' name='places[1][population]' value='3792621'>
  <input name='places[2][city]' value='Chicago'>
  <input type='number' name='places[2][population]' value='2695598'>
</form>

Wenn Sie das Formular an die Codierungsmethode von JSONForms übergeben, erhalten Sie das folgende Objekt zurück:

{
  "places": [
    {
      "city": "New York City",
      "population": 8175133
    },
    {
      "city": "Los Angeles",
      "population": 3792621
    },
    {
      "city": "Chicago",
      "population": 2695598
    }
  ]
}

Hier ist eine Demo mit Ihrem Formular.

Cezary Wojtkowski
quelle
Sieht gut aus und funktioniert gut, danke. Nur eine Sache, die minimierte Version ruft eine Kartendatei auf, sollte imo optional sein.
adi518
2

$( "form" ).bind( "submit", function(e) {
    e.preventDefault();
    
    console.log(  $(this).serializeObject() );    

    //console.log(  $(this).serialize() );
    //console.log(  $(this).serializeArray() );

});


$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();

    $.each( a, function() {
        if ( o[this.name] !== undefined) 
        {
            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;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<form>

    <input type="radio" name="foo" value="1" checked="checked" />
    <input type="radio" name="foo" value="0" />
    <input name="bar" value="xxx" />

    <select name="this">
        <option value="hi" selected="selected">Hi</option>
        <option value="ho">Ho</option>
    </select>

    <input type="submit" value="Submit" />

</form>

Codepen

Anteliebe
quelle
2

Für diejenigen unter Ihnen, die eine Objectim Gegensatz zu einer serialisierten Zeichenfolge bevorzugen (wie die von zurückgegebene $(form).serialize()und eine leichte Verbesserung $(form).serializeArray()), können Sie den folgenden Code verwenden:

var Form = {
    _form: null,
    _validate: function(){
        if(!this._form || this._form.tagName.toLowerCase() !== "form") return false;
        if(!this._form.elements.length) return false;
    }, _loopFields: function(callback){
        var elements = this._form.elements;
        for(var i = 0; i < elements.length; i++){
            var element = form.elements[i];
            if(name !== ""){
                callback(this._valueOfField(element));
            }
        }
    }, _valueOfField: function(element){
        var type = element.type;
        var name = element.name.trim();
        var nodeName = element.nodeName.toLowerCase();
        switch(nodeName){
            case "input":
                if(type === "radio" || type === "checkbox"){
                    if(element.checked){
                        return element.value;
                    }
                }
                return element.value;
                break;
            case "select":
                if(type === "select-multiple"){
                    for(var i = 0; i < element.options.length; i++){
                        if(options[i].selected){
                            return element.value;
                        }
                    }
                }
                return element.value;
                break;
            case "button":
                switch(type){
                    case "reset": 
                    case "submit": 
                    case "button":
                        return element.value;
                        break;
                }
                break;
        } 
    }, serialize: function(form){
        var data = {};
        this._form = form;

        if(this._validate()){
            this._loopFields(function(value){
                if(value !== null) data[name] = value;
            });
        }
        return data;
    }
};

Um es auszuführen, verwenden Sie einfach Form.serialize(form)und die Funktion gibt eine Objectähnliche zurück:

<!-- { username: "username", password: "password" } !-->
<input type="text" value="username">
<input type="password" value="password">

Als Bonus bedeutet dies, dass Sie nicht das gesamte jQuery-Paket nur für eine Serialisierungsfunktion installieren müssen.

GROVER.
quelle
1

Ich habe eine Funktion geschrieben, die sich um mehrere Kontrollkästchen und mehrere Auswahlen kümmert. In diesen Fällen wird ein Array zurückgegeben.

function getFormData(formId) {
    return $('#' + formId).serializeArray().reduce(function (obj, item) {
        var name = item.name,
            value = item.value;

        if (obj.hasOwnProperty(name)) {
            if (typeof obj[name] == "string") {
                obj[name] = [obj[name]];
                obj[name].push(value);
            } else {
                obj[name].push(value);
            }
        } else {
            obj[name] = value;
        }
        return obj;
    }, {});
}
István
quelle
1

Anzeigen von Formulareingabeelementfeldern und Eingabedatei zum Senden Ihres Formulars ohne Seitenaktualisierung und Abrufen aller Werte mit darin enthaltener Datei

<form id="imageUploadForm"   action="" method="post" enctype="multipart/form-data">
<input type="text" class="form-control" id="fname" name='fname' placeholder="First Name" >
<input type="text" class="form-control" name='lname' id="lname" placeholder="Last Name">
<input type="number" name='phoneno'  class="form-control" id="phoneno" placeholder="Phone Number">
<textarea class="form-control" name='address' id="address" rows="5" cols="5" placeholder="Your Address"></textarea>
<input type="file" name="file" id="file" >
<input type="submit" id="sub" value="Registration">					   
</form>
Auf der Seite "Senden" wird eine Ajax-Anfrage an Ihre PHP-Datei gesendet.
$('#imageUploadForm').on('submit',(function(e) 
{
     fname = $('#fname').val();
     lname =  $('#lname').val();
     address =  $('#address').val();
     phoneno =  $('#phoneno').val();
     file =  $('#file').val();
     e.preventDefault();
     var formData = new FormData(this);
     formData.append('file', $('#file')[0]);
     formData.append('fname',$('#fname').val());
     formData.append('lname',$('#lname').val());
     formData.append('phoneno',$('#phoneno').val());
     formData.append('address',$('#address').val());
     $.ajax({
		type:'POST',
                url: "test.php",
                //url: '<?php echo base_url().'edit_profile/edit_profile2';?>',

                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                success:function(data)
                {
                     alert('Data with file are submitted !');

                }

     });

}))

Mohsin Shoukat
quelle
Was brauchen neue FormData hier?
Sahu V Kumar
1
@VishalKumarSahu Ich lade eine Datei hoch, deshalb verwende ich dafür formData.
Mohsin Shoukat
1
$(form).serializeArray().reduce(function (obj, item) {
      if (obj[item.name]) {
           if ($.isArray(obj[item.name])) {
               obj[item.name].push(item.value);
           } else {
                var previousValue = obj[item.name];
                obj[item.name] = [previousValue, item.value];
           }
      } else {
           obj[item.name] = item.value;
      }

     return obj;
}, {});

Es wird das Problem behoben: Es konnte nicht mit Mehrfachauswahl gearbeitet werden.

ke ke
quelle
0

Sie sind alle nicht ganz richtig. Sie können nicht schreiben:

formObj[input.name] = input.value;

Denn auf diese Weise werden bei einer Mehrfachauswahlliste die Werte mit der letzten überschrieben, da sie wie folgt übertragen werden: "param1": "value1", "param1": "value2".

Der richtige Ansatz ist also:

if (formData[input.name] === undefined) {
    formData[input.name] = input.value;
}
else {
    var inputFieldArray = $.merge([], $.isArray(formData[input.name]) ? formData[input.name] : [formData[input.name]]);
    $.merge(inputFieldArray, [input.value]);
    formData[input.name] = $.merge([], inputFieldArray);
}
Alexander
quelle
0

Diese Methode sollte es tun. Es serialisiert die Formulardaten und konvertiert sie dann in ein Objekt. Kümmert sich auch um Gruppen von Kontrollkästchen.

function getFormObj(formId) {
  var formParams = {};
  $('#' + formId)
    .serializeArray()
    .forEach(function(item) {
      if (formParams[item.name]) {
        formParams[item.name] = [formParams[item.name]];
        formParams[item.name].push(item.value)
      } else {
        formParams[item.name] = item.value
      }
    });
  return formParams;
}
user1101791
quelle
Funktioniert für Kontrollkästchen, jedoch nicht für Optionsfelder, bei denen Steuerelemente das nameAttribut gemeinsam nutzen.
Kyle Falconer
0

Hier ist eine nette Vanilla JS-Funktion, die ich geschrieben habe, um Formulardaten als Objekt zu extrahieren. Es bietet auch Optionen zum Einfügen von Ergänzungen in das Objekt und zum Löschen der Formulareingabefelder.

const extractFormData = ({ form, clear, add }) => {
  return [].slice.call(form.children).filter(node => node.nodeName === 'INPUT')
  .reduce((formData, input) => {
    const value = input.value
    if (clear) { input.value = '' }
    return {
      ...formData,
      [input.name]: value
    }
  }, add)
}

Hier ist ein Beispiel für die Verwendung mit einer Post-Anfrage:

submitGrudge(e) {
  e.preventDefault()

  const form = e.target
  const add = { id: Date.now(), forgiven: false }
  const grudge = extractFormData({ form, add, clear: true })

  // grudge = {
  //  "name": "Example name",
  //  "offense": "Example string",
  //  "date": "2017-02-16",
  //  "id": 1487877281983,
  //  "forgiven": false
  // }

  fetch('http://localhost:3001/api/grudge', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(grudge)
  })
    .then(response => response.json())
    .then(grudges => this.setState({ grudges }))
    .catch(err => console.log('error: ', err))
}
IanLancaster
quelle