FormData: FormData() Konstruktor

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üssel-/Wertpaaren des form-Elements befüllt. Dabei wird die Name-Eigenschaft jedes Elements als Schlüssel und der übermittelte Wert als Wert verwendet. Auch Dateieingabeinhalte werden kodiert. Ein formdata-Event wird auf dem Formular ausgelöst, wenn das FormData-Objekt erstellt wird, sodass das Formular die Formulardaten bei Bedarf ändern kann.

submitter Optional

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

Ausnahmen

TypeError

Wird ausgelöst, wenn der angegebene submitter kein Sende-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.

Beispiele

Erstellen einer leeren FormData

Die folgende Zeile erstellt ein leeres FormData-Objekt:

const formData = new FormData();

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

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

Vorbefüllen aus einem HTML-Formular-Element

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

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 Gründen der Kürze wird das <form>-Element nicht angezeigt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von FormData-Objekten
• <Form>