JavaScript Form Submit

Vor der Übertragung der in einem HTML-Form eingegebenen Daten muss die vom Benutzer getätigte Eingabe zunächst durch ihn bestätigt werden. Zu diesem Zweck gibt es in HTML sogenannte Submit-Buttons, die in einem HTML-Formular eingebaut werden können. Submit-Buttons sind normale Eingabeelemente, werden über das INPUT-Tag definiert und sind Bestandteil des Formulars, in dem sie notiert sind (innerhalb des FORM-Tags).

Anders als Eingabefelder, die der Eingabe von Text dienen (das zugehörige Type-Attribut wird hier mit „text” belegt) zeichnen sich Submit-Buttons dadurch aus, dass deren Typ (Type-Attribut des INPUT-Tags) auf „submit” gesetzt ist. Die in einem Formular eingegebenen Daten werden normalerweise nach Betätigung eines Submit-Buttons an den Webserver verschickt.

JavaScript Form Submit Beispiel 1: Submit Button

Das folgende Beispiel zeigt, wie ein solches Formular mit einem Submit-Button definiert wird. Im unten stehenden Script wird ein Formular definiert, welches ein Eingabefeld (Typ Text) und zwei Buttons enthält. Der erste Button ist ein Submit-Button und dient der Bestätigung der Benutzereingabe. Nachdem dieser Button angeklickt wurde, sendet das Formular seine Daten an den Webserver. Der Reset-Button darunter setzt den Inhalt der Eingabefelder des Formulars zurück.

<form name="formular1" method="get">
  Eingabefeld <input name="Textfeld" type="text" /><br>
  <input type="submit" name="Submit-Button" value="Daten abschicken" />
  <input type="reset" name="Reset-Button" value="Zur&uuml;cksetzen" />
</form>

JavaScript Form Submit Beispiel 2: Per Links im Dokument

Die im vorherigen Beispiel gezeigte Lösung benötigt keinerlei Script-Unterstützung. Auch bei ausgeschaltetem JavaScript funktioniert diese Form der Bestätigung von Benutzereingaben. Neben der Lösung per HTML-Submit kann die Übertragung von Benutzereingaben auch mit Hilfe von JavaScript Code eingeleitet werden.

Im nächsten Beispiel werden Benutzereingaben durch Anklicken eines normalen HTML-Links an den Webserver verschickt. Dazu wird auch hier wieder ein Formular definiert, welches ein Eingabeelement enthält. Darauf folgend werden zwei Links (A-Tags) definiert, welches über ihr href-Attribut die entsprechende Methode des Form-Objekts aufrufen. Dabei können die Links an beliebiger Stelle im HTML-Dokument definiert sein – sie müssen und sollten auch normalerweise nicht innerhalb des Form-Elements notiert werden. Der Zugriff auf das Formular erfolgt über das Document-Object, was eine beliebige Positionierung ermöglicht.

Der erste Link ruft, nachdem er angeklickt wurde, die Methode submit() auf, was dazu führt, dass die Daten an den Webserver übertragen werden. Mit dem anderen Link wird der Inhalt des Formulars zurückgesetzt.

<form name="formular2" method="get">
  Eingabefeld <input name="Textfeld" type="text" /><br>
  <a href="javascript:document.formular2.submit()">Daten abschicken</a>
  <a href="javascript:document.formular2.reset()">Formular leeren</a>
</form>

JavaScript Form Submit Beispiel 3: onClick Submit per beliebigem HTML-Element

Auch das Auftreten eines Events kann dazu verwendet werden einen Submit-Vorgang einzuleiten. Da Events nicht allein an Links oder Formularelemente gebunden sind, erhöht dies die Flexibilität bei der Übertragung von Benutzerdaten und gibt zusätzliche Freiheiten beim Design von Benutzungsschnittstellen. Auf diese Weise können – wie im unteren Beispiel gezeigt – beispielsweise auch Bilder mit Ereignissen verbunden werden und dazu verwendet werden, Formulardaten abzuschicken. Das nächste Beispiel zeigt, wie das onClick-Event dazu verwendet werden kann, die Übertragung von Benutzereingaben an den Webserver durchzuführen.

<form name="formular3" method="get">
  Eingabefeld <input name="Textfeld" type="text" /><br>
  <img src="pic/submit.gif" onclick="document.formular3.submit()" />
</form>

Eingabefeld