JavaScript Form Submit

[an error occurred while processing this directive] javascript document submit javascript onclick submit javascript submit javascript submit button 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>
Eingabefeld

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>
Eingabefeld
Daten abschicken Formular leeren

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
[an error occurred while processing this directive]
Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet

¬ Menu

¬ Gratis Download

[an error occurred while processing this directive]

¬ Tutorials

¬ Seminare



[an error occurred while processing this directive] [an error occurred while processing this directive]

¬ Insolvenzrecht