Formularversand in JavaScript

Sie können bereits mit Formularelementen in JavaScript arbeiten und diese im Browser verarbeiten. Formulare können jedoch auch an den Server gesendet werden, damit sie vom serverseitigen Teil der Website, geschrieben in PHP oder NodeJS, verarbeitet werden können.

Dies ist notwendig, um Daten der Website, die auf dem Server gespeichert sind, hinzuzufügen oder zu ändern.

Schauen wir uns an, wie das geht. Nehmen wir an, wir haben mehrere Eingabefelder und einen Button:

<input>
<input>
<input type="submit">

Umgeben wir unsere Elemente mit dem Tag form. In diesem Fall erhalten wir ein Formular, das beim Klick auf den Button an den Server gesendet wird:

<form>
	<input>
	<input>
	<input type="submit">
</form>

Damit der Server die Daten des Formulars erhalten kann, muss jedem Eingabefeld ein eigener Name gegeben werden:

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

In diesem Fall werden die Formulardaten auf dem Server in Form von Schlüssel-Wert-Paaren ankommen, wobei die Schlüssel die Namen der Formularelemente sind und die Werte die eingegebenen Daten.

Um das Formular zu senden, ist kein Server notwendig. Sie können den bereitgestellten Code des Formulars in eine beliebige Datei kopieren, sie im Browser öffnen und auf den Sende-Button klicken - das Formular wird gesendet und die Browserseite wird neu geladen.

Ohne einen Server gelangen die Formulardaten jedoch nirgendwohin. Deshalb werden wir die Funktionsweise des Formulars zusammen mit einem Server testen. Da Sie noch keine serverseitigen Sprachen kennen, üben wir das Senden des Formulars mit Hilfe unseres Lehr-HTTP-Servers.

Platzieren wir unser Formular in einer Datei so, dass es unter der Adresse http://localhost:3001/form.html verfügbar ist:

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Fügen wir unserem Formular das Attribut action hinzu, das die Sendeadresse unseres Formulars angibt:

<form action="/handler/">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Schreiben wir nun in der Datei server.js einen Handler für die Sendeadresse des Formulars:

export default {
	'/handler/': function() {
		return 'form data received';
	}
}

In den Parameter unseres Handlers werden die gesendeten Formulardaten übergeben:

export default {
	'/handler/': function(data) {
		console.log(data); // wird in der Serverkonsole ausgegeben
		return 'form data received';
	}
}

Erstellen Sie ein Formular und eine Datei zu dessen Verarbeitung. Senden Sie das Formular und prüfen Sie, ob die Daten tatsächlich beim Server angekommen sind.