Formulare per ENTER-Taste versenden

Formular mit einer Standardschaltfläche

Legt man einer HTML-Seite eine Form an und fügt eine Schaltfläche mit dem Attribut type="submit" an, so wird die Seite, die im Formularattribut action eingetragen ist ausgeführt.

Beispiel:

<form method="POST" action="go.asp">
   <p>
      <label for="txtEingabe">Eingabe</label>
      <input id="txtEingabe" type="text">
   </p>
   <input type="submit" id="cmdGo" value="Los gehts...">
</form>

So weit das Standardprozedere bei HTML-Formularen.

Formular mit einer Standardschaltfläche und Javascript

Etwas schwieriger wird die Sache, wenn man z.B. die vom Benutzer vorgenommene Eingabe vor dem Versenden an die verarbeitende Seite client-seitig per Javascript noch verändern möchte, zum Beispiel, um die Eingabe sonderzeichen-sicher zu machen (escapen) oder um die Eingabe per MD5 oder SHA1 zu verschlüsseln. In diesem Fall benötigt man ein zusätzliches verstecktes Feld, in das man die veränderten Daten hineinschreibt. Per onClick-Event der Schaltfläche wird dann über etwas Javascript-Code zunächst der neue Wert berechnet und dann das Formular abgeschickt.

Beispiel (Zeilen umgebrochen):

<form method="POST" action="go.asp">
   <p>
      <label for="txtEingabe">Eingabe</label>
      <input id="txtEingabe" name="txtEingabe" type="text">
   </p>
   <input type="submit" id="cmdGo" value="Los gehts..."
      onclick="this.form.txtDummy=escape(this.form.txtEingabe.value));this.form.submit();">
   <input type="hidden" id="txtDummy" name="txtDummy" value="">
</form>

Formular mit mehreren Schaltflächen

Beide bisher genannten Beispiele basieren auf dem Ansatz im Formular lediglich eine Schaltfläche mit dem type-Attribut submit zu haben. Ist dies jedoch nicht möglich, wenn man z.B. mehrere Aktionen anbieten möchte, so muss man auf das Attribut button ausweichen, da es in einem Formular immer nur eine submit-Schaltfläche geben kann. Das Verfahren ist im Prinzip dasselbe wie im letzten Beispiel, nur das man nun auch noch in jedem onClick-Event der Schaltflächen das action-Attribut des Formulars per Javascript setzen muss.

Setzt man in einem solchen Formular das type-Attribut einer Schaltfläche auf submit, fungiert diese dann als Standardschaltfläche, die ausgelöst wird, wenn der Benutzer nach Eingabe eines Wertes in das Textfeld die ENTER-Taste drückt.

Beispiel (Zeilen umgebrochen):

<form method="POST" action="">
   <p>
      <label for="txtEingabe">Eingabe</label>
      <input id="txtEingabe" type="text">
   </p>
   <input type="submit" id="cmdGo" value="Tu dies"
      onclick="this.form.action='tudies.asp';this.form.submit();">
   <input type="button" id="cmdGo" value="Tu das"
      onclick="this.form.action='tudas.asp';this.form.submit();">
   <input type="button" id="cmdGo" value="Tu jenes"
      onclick="this.form.action='tujenes.asp';this.form.submit();">
</form>

Formular ohne Schaltflächen

Manchmal hat der Entwickler jedoch keine Möglichkeit in einem Formular zum Versenden der Daten eine Schaltfläche zu benutzen. Zum Beispiel, wenn nicht genügend Platz im vorgesehenen Layout vorhanden ist. In diesem Fall muss das Versenden der Daten Javascript übernehmen. Hierzu bietet sich das Event onkeypress an, das von input-Felder unterstützt wird. Dieses wird ausgelöst, wenn der Benutzer mit dem Cursor im Textfeld steht und eine Taste drückt. Per Javascript kann man hierbei jeden Tastenanschlag überprüfen und entsprechend reagieren, wenn der Benutzer die Taste ENTER drückt.

Der notwendige Code ist nicht besonders umfangreich, aber es macht in diesem Fall mehr Sinn im Kopf des HTML-Dokument oder in einer externen JS-Datei hierfür zwei Funktionen anzulegen.

Die Function evalKeyForSubmit hat zwei Parameter: das auslösende Event, in unserem Fall onkeypress, das weitere Informationen, wie den Code der gedrückten Taste enthält, und das Formular, das gesendet werden soll, wenn der Fall ENTER-Taste (Tastencode 13) eintritt.

Beispiel:

<script type="text/javascript">

function evalKeyForSubmit(event, frm) {

   if (event && event.which == 13) // IE: ...event.keyCode...
      // ENTER gedrückt, also Formular abschicken
      frm.txtDummy.value=escape(frm.txtEingabe.value)
      frm.action='go.asp'
      frm.submit();
   else
      return true;
}

</script>

Über die Eigenschaft which des Ereignisses kann man in Javascript den Tastencode auslesen und auswerten. Dies gilt jedoch nur für die Netscape-Browser und Firefox (sog. Netscape-Syntax). Bei der Verwendung des Microsoft Internet Explorers lautet die Eigenschaft keyCode (Microsoft-Syntax). Browser wie Opera, Safari oder Konqueror kommen zumeist mit beiden Schreibweisen klar.

Über die Anweisung return true; werden alle anderen Tastenschläge an das Textfeld zurückgesendet.

Das dazugehörige Formular sieht nun folgendermaßen aus:

<form method="POST" action="">
   <p>
      <label for="txtEingabe">Eingabe</label>
      <input id="txtEingabe" name="txtEingabe" type="text"
         onkeypress="return evalKeyForSubmit(event, this.form);">
   </p>
   <input type="hidden" id="txtDummy" name="txtDummy" value="">
</form>

Weiterführende Informationen: