Hinweis: Diese Funktion ist in Web Workers verfügbar.

Der FormData()-Konstruktor erstellt ein neues FormData-Objekt.

Syntax

new FormData()
new FormData(form)
new FormData(form, submitter)

Parameter

form Optional

Ein HTML-<form>-Element — wenn angegeben, wird das FormData-Objekt mit den aktuellen Schlüsseln/Werten des form-Elements basierend auf den Namen-Attributen der Elemente als Schlüssel und ihren übermittelten Werten als Werte gefüllt. Es werden auch Inhalte von Datei-Inputs kodiert. Ein formdata-Ereignis wird auf dem Formular ausgelöst, wenn das FormData-Objekt erstellt wird, sodass das Formular die Formulardaten bei Bedarf ändern kann.

submitter Optional

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

Ausnahmen

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 Nachfahre des Formularelements sein oder ein form-Attribut haben, das auf das Formular verweist.

Beispiele

Erstellen eines leeren FormData

Die folgende Zeile erstellt ein leeres FormData-Objekt:

const formData = new FormData();

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

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

Vorbefüllen von einem HTML-Formularelement

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

Hinweis: Nur erfolgreiche Formularsteuerungen werden in ein FormData-Objekt aufgenommen, d.h. solche mit einem Namen und die nicht im deaktivierten Zustand sind.

HTML

<form id="form">
  <input type="text" name="text1" value="foo" />
  <input type="text" name="text2" value="bar" />
  <input type="text" name="text3" 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

Aus Kürzungsgründen ist das <form>-Element nicht sichtbar.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von FormData-Objekten
• <Form>