Signatur
Beschreibung
Die Eigenschaft formData des FormDataEvent-Interfaces liefert das FormData-Objekt, das der Browser beim Aufbau der Formulardaten erzeugt hat. Das formdata-Ereignis wird ausgelöst, wenn ein Formular abgeschickt wird (nach dem submit-Ereignis) oder wenn im Code new FormData(form) aufgerufen wird.
Wichtig: Die Eigenschaft selbst ist schreibgeschützt, das referenzierte FormData-Objekt ist es aber nicht. Mit append(), set() oder delete() lassen sich die übermittelten Daten verändern, bevor sie gesendet bzw. an den Konstruktor zurückgegeben werden. So kann man zum Beispiel berechnete Werte, Zeitstempel oder Daten aus Web Components ohne versteckte <input type="hidden">-Felder einschleusen.
Typische Einsatzfälle sind form-associated Custom Elements, die ihren Wert an das Formular melden, das Normalisieren von Eingaben (z. B. Leerzeichen trimmen) sowie das Entfernen interner Felder vor dem Versand.
Rückgabewert
FormData-Objekt mit allen Einträgen des Formulars. Änderungen daran wirken sich direkt auf die übermittelten Daten aus.Beispiele
Zusätzliches Feld beim Absenden anhängen
const form = document.querySelector('#kontakt');
form.addEventListener('formdata', (event) => {
// Zeitstempel ohne verstecktes Input-Feld mitsenden
event.formData.append('gesendetAm', new Date().toISOString());
});Daten normalisieren und interne Felder entfernen
const form = document.querySelector('form');
form.addEventListener('formdata', ({ formData }) => {
const email = formData.get('email');
if (typeof email === 'string') {
formData.set('email', email.trim().toLowerCase());
}
formData.delete('_debug');
});
// Löst ebenfalls das formdata-Ereignis aus
const data = new FormData(form);
console.log([...data.entries()]);Per Fetch senden und Ereignis per on-Property abfangen
const form = document.querySelector('#bestellung');
form.onformdata = (event) => {
event.formData.append('quelle', 'webshop');
};
form.addEventListener('submit', async (event) => {
event.preventDefault();
const body = new FormData(form); // enthält jetzt auch 'quelle'
const res = await fetch('/api/bestellung', { method: 'POST', body });
console.log(res.status);
});// Wichtig · Fallstricke
- Die Eigenschaft ist schreibgeschützt:
event.formData = new FormData()hat keine Wirkung. Ändern Sie stattdessen den Inhalt des vorhandenen Objekts. - Der Handler läuft synchron. Asynchrone Änderungen (z. B. nach einem
await) kommen zu spät und werden nicht mehr übermittelt. - Wenn Sie im
formdata-Handler selbstnew FormData(form)aufrufen, lösen Sie das Ereignis erneut aus. Das führt zu einer Endlosrekursion bzw. einemInvalidStateError. - Das Ereignis ist nicht abbrechbar. Um den Versand zu verhindern, nutzen Sie
preventDefault()imsubmit-Ereignis. - Kompatibilität: Chrome/Edge 77+, Firefox 72+, Safari 15+. In älteren Browsern greifen Sie auf versteckte Eingabefelder zurück.