FormData: FormData()-Konstruktor

form Optional

Ein HTML-<form>-Element — wenn angegeben, wird das FormData-Objekt mit den aktuellen Schlüsseln/Werten des form mithilfe der Name-Eigenschaft jedes Elements für die Schlüssel und deren übermittelten Wert für die Werte befüllt. Es wird auch Datei-Input-Inhalte kodieren. Ein formdata-Ereignis wird ausgelöst, wenn das FormData-Objekt erstellt wird, was der Form ermöglicht, die Formulardaten bei Bedarf zu modifizieren.

submitter Optional

Ein Submit-Button, der ein Mitglied des form ist. Wenn der submitter ein name-Attribut hat oder ein <input type="image"> ist, werden seine Daten eingeschlossen im FormData-Objekt (z.B. btnName=btnValue).

TypeError

Wird ausgelöst, wenn der angegebene submitter kein Submit-Button ist.

NotFoundError DOMException

Wird ausgelöst, wenn der angegebene submitter kein Mitglied des form ist. Der submitter muss entweder ein Nachkomme des Formularelements sein oder ein form-Attribut haben, das auf das Formular verweist.

Die folgende Zeile erstellt ein leeres FormData-Objekt:

const formData = new FormData();

Sie könnten ein Schlüssel/Wert-Paar mit append() hinzufügen:

formData.append("username", "Chris");

Sie können die optionalen form- und submitter-Argumente angeben, wenn Sie das FormData-Objekt erstellen, um es mit Werten aus dem angegebenen Formular vorzubefüllen.

HTML

<form id="form">
  <input type="text" name="text1" value="foo" />
  <input type="text" name="text2" value="bar" />
  <input type="text" name="text2" value="baz" />
  <input type="checkbox" name="check" checked disabled />
  <button name="intent" value="save">Save</button>
  <button name="intent" value="saveAsCopy">Save As Copy</button>
</form>

<output id="output"></output>

form {
  display: none;
}

output {
  display: block;
  white-space: pre-wrap;
}

JavaScript

const form = document.getElementById("form");
const submitter = document.querySelector("button[value=save]");
const formData = new FormData(form, submitter);

const output = document.getElementById("output");

for (const [key, value] of formData) {
  output.textContent += `${key}: ${value}\n`;
}

Ergebnis

Zur besseren Übersicht ist das <form>-Element ausgeblendet.

• Verwendung von FormData-Objekten
• <form>