CSS, HTML und Javascript mit {stil}

Javascript FormData

Javascript-Formulare formData

Javascript FormData belegt die Namen-Wert-Paare eines Formulars und encodiert die Werte bei der Übertragung.

Das spart das langatmige Navigieren durch die Eingabefelder eines Formulars und Zusammenstellen eines Post-Requests oder eines JSON-Objekts und liefert die Daten Prêt-à-porter an die Anwendung.

Daten mit FormData an eine Anwendung weiterzugeben ist so einfach, dass man fast ein wenig in Panik gerät.

Mitmachen!
<form id="myform">
   <input type="text" value="" id="fn" name="fn"> filename<br>
   <input type="text" value="" id="em" name="em"> email<br>
   <input type="submit" value="Speichern">
</form>
  • FormData() erstellt ein neues FormData-Objekt,
  • FormData.append() hängt ein key-value-Paar an und erstellt neue Schlüssel


<script>
document.querySelector('#myform').onsubmit = function (e) {
   e.preventDefault();
   var myForm = document.getElementById('myForm');
   var data = new FormData();
   data.append("data" , "Wird noch mit dazugepackt");
   data.append("fn" , document.querySelector("#fn").value);
   data.append("em" , document.querySelector("#em").value);
   var xhr = new XMLHttpRequest();
   xhr.open( 'post', 'formdata.php', true );
   xhr.send(data);
   
   … 
}
</script>

In der Anwendung auf dem Server kommen die Daten »ganz normal« als $_POST-Array an. Wenn also Javascript im Browser nicht aktiv ist, haben wir ein normales HTML-Formular und eine normale PHP-Anwendung. Das Formular funktioniert auch ohne Javascript – wenn auch wahrscheinlich deutlich unbequemer für den Benutzer.

Der Vorteil gegenüber JSON: Die Daten auf der Serverseite sind nicht von einer normalen Datenübertragung zu unterscheiden.

FormData Browser-Support

Die grundlegenden Funktionen FormData und FormData.append werden von allen modernen Browsern unterstützt, IE ab Version 10.