js Form­Da­ta API

Die Form­Da­ta API erleich­tert den Umgang mit Daten aus html-Forms in javascript/React erheblich.

Aus­gangs­punkt ist die­ses Beispiel-Formular:

<form onSubmit={handleSubmit}>
  <input type='text' name='name' />
  <input type='email' name='email' />
  <input type='password' name='password' />
</form>

Mit Con­trol­led Inputs müss­ten für jeden Input die value- und onCh­an­ge-Pro­per­ties gesetzt, eine hand­leCh­an­ge-Rou­ti­ne und ein Sta­te mit use­Sta­te defi­niert wer­den. Beim Sub­mit befin­den sich die Form-Daten dann im State-Objekt.

Mit der Form­Da­ta-API kann ohne wei­te­re Vor­keh­run­gen in der hand­le­Sub­mit-Rou­ti­ne der gesam­ten Inhalt des For­mu­lars als Objekt abge­holt werden:

function handleSubmit(e) {
  e.preventDefault();
  const formData = new FormData(e.currentTarget);
  const formContent = Object.fromEntries(formData);
  ...
  e.currentTarget.reset();
};

Dabei ver­weist e.currentTarget auf das Objekt, dem das Event zuge­wie­sen ist, hier also die Form (und nicht der But­ton, der in e.target steckt).

Die Funk­ti­on Object.fromEntries wan­delt das ver­schach­tel­te Form­Da­ta-Array in ein Objekt aus name:value-Paaren um.

Mit .reset() wer­den die Ein­ga­ben im For­mu­lar am Ende wie­der gelöscht.

Über die set- oder append-Metho­den kann das For­mu­lar auch mit Daten vor­be­legt werden.

Alle Ein­zel­hei­ten der Form­Da­ta-API fin­det man in der MDN-Dokumen­ta­ti­on.