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

[UPDATE 2020]

Mit einem einfachen Oneliner in vanilla js, der die fromEntries (wie immer die Browserunterstützung prüfen):

Object.fromEntries(new FormData(form))

Answer 2

All diese Antworten erschienen mir so übertrieben. Es spricht einiges für die Einfachheit. Solange alle Ihre Formular-Eingaben haben das Attribut Name gesetzt sollte dies nur Jim Dandy arbeiten.

$('form.myform').submit(function () {
  var $this = $(this)
    , viewArr = $this.serializeArray()
    , view = {};

  for (var i in viewArr) {
    view[viewArr[i].name] = viewArr[i].value;
  }

  //Do stuff with view object here (e.g. JSON.stringify?)
});

Answer 3

Ich habe überprüft, dass es ein Problem mit allen anderen Antworten gibt, dass, wenn der Eingabename als Array ist, wie name[key] dann sollte sie wie folgt generiert werden:

name:{ key : value }

---

Zum Beispiel: Wenn Sie ein HTML-Formular ähnlich dem untenstehenden haben:

<form>
    <input name="name" value="value" >
    <input name="name1[key1]" value="value1" >
    <input name="name2[key2]" value="value2" >
    <input name="name3[key3]" value="value3" >
</form>

Aber es sollte genau wie das JSON unten generiert werden, und wird nicht ein Objekt wie das folgende mit allen anderen Antworten. Wenn also jemand so etwas wie das folgende JSON erzeugen möchte, versuchen Sie den folgenden JS-Code.

{
    name  : 'value',
    name1 : { key1 : 'value1' },
    name2 : { key2 : 'value2' },
    name3 : { key2 : 'value2' }
}

$.fn.getForm2obj = function() {
  var _ = {};
  $.map(this.serializeArray(), function(n) {
    const keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g);
    if (keys.length > 1) {
      let tmp = _;
      pop = keys.pop();
      for (let i = 0; i < keys.length, j = keys[i]; i++) {
        tmp[j] = (!tmp[j] ? (pop == '') ? [] : {} : tmp[j]), tmp = tmp[j];
      }
      if (pop == '') tmp = (!Array.isArray(tmp) ? [] : tmp), tmp.push(n.value);
      else tmp[pop] = n.value;
    } else _[keys.pop()] = n.value;
  });
  return _;
}
console.log($('form').getForm2obj());
$('form input').change(function() {
  console.clear();
  console.log($('form').getForm2obj());
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<form>
  <input name="name" value="value">
  <input type="checkbox" name="name1[]" value="1" checked="checked">1
  <input type="checkbox" name="name1[]" value="2">2
  <input type="checkbox" name="name1[]" value="3">3<br>
  <input type="radio" name="gender" value="male" checked="checked">male
  <input type="radio" name="gender" value="female"> female
  <input name="name2[key1]" value="value1">
  <input name="one[another][another_one]" value="value4">
  <input name="name3[1][name]" value="value4">
  <input name="name3[2][name]" value="value4">
  <input name="[]" value="value5">
</form>

Answer 4

Es gibt keine Möglichkeit, dies zu tun, ohne die einzelnen Elemente zu untersuchen. Was Sie wirklich wissen wollen, ist: "Hat jemand bereits eine Methode geschrieben, die ein Formular in ein JSON-Objekt umwandelt?" So etwas wie das Folgende sollte funktionieren - beachten Sie, dass Sie damit nur die Formularelemente erhalten, die über ein POST zurückgegeben werden (sie müssen einen Namen haben). Dies ist nicht getestet .

function formToJSON( selector )
{
     var form = {};
     $(selector).find(':input[name]:enabled').each( function() {
         var self = $(this);
         var name = self.attr('name');
         if (form[name]) {
            form[name] = form[name] + ',' + self.val();
         }
         else {
            form[name] = self.val();
         }
     });

     return form;
}

Answer 5

Wenn Sie Folgendes verwenden Underscore.js können Sie die relativ prägnant verwenden:

_.object(_.map($('#myform').serializeArray(), _.values))