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" action="myform.php" method="post">
   <input type="text" value="" id="fn" name="fn"> filename<br>
   <input type="text" value="" id="em" name="em"> email<br>
   <input type="submit" value="Senden">
</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.

Wer noch IE9 und älter unterstützen muss, wird eher jQuery oder eine andere Library einsetzen, die ihre eigenen Methoden zum Extrahieren der Daten aus Eingabefeldern bieten.