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

Wenn Sie auf redundante Elementselektoren verzichten wollen, können Sie auf die FormData aus der Handler-Funktion des Submit-Ereignisses. Das folgende Codeschnipsel wird ausgedruckt .

function submitForm(formElement) {
  const formData = new FormData(formElement)
  const allEntries = [...formData.entries()]
    .reduce((all, entry) => {
      all[entry[0]] = entry[1]
      return all
    }, {})
  console.log(allEntries)
  return false;
}

<form onsubmit="return submitForm(this)">
  <input name="searchTerm">
  <input name="includeBananas" type="checkbox">
  <button>Submit</button>
</form>

Edit : Ich habe festgestellt, dass hier eine Sache fehlt: FormData kann mehrere Werte für denselben Schlüssel enthalten. In diesem Fall bräuchten Sie etwas wie

const allEntries = [...form_data.keys()].reduce((all, form_key) => {
    all[form_key] = form_data.getAll(form_key)
    return all
}, {})