Rheinwerk Computing :: Einstieg in JavaScript

7.8 Alle Formulare, Eigenschaft »forms«

Das Feld forms ist eine Eigenschaft des Objekts document. Es beinhaltet alle Formulare des Dokuments. Ein Formular besteht aus einzelnen Elementen. Das Feld elements ist eine Eigenschaft eines Eintrags im Feld forms. Es beinhaltet alle Elemente des betreffenden Formulars .

Falls es sich bei dem Formularelement um ein Auswahlmenü in einem select-Container handelt, enthält es einzelne Einträge, die Optionen. Das Feld options ist eine Eigenschaft eines Eintrags im Feld elements. Es beinhaltet alle Optionen des betreffenden Auswahlmenüs.

7.8.1 Zugriff auf Formulare

Sie können auf Werte von Formularelementen auf unterschiedliche Art und Weise zugreifen . Im folgenden Beispielprogramm werden anhand eines Auswahlmenüs verschiedene ältere und neuere Schreibweisen gezeigt, die in aktuellen Browsern gültig sind und eingesetzt werden.

Zunächst das Beispielprogramm:

...
<body>
   <form name="f" action="#">
      <p>Land: <select id="idLand" name="land">
         <option id="idItalien" value="Italy">Italien</option>
         <option id="idSpanien" value="Spain">Spanien</option>
         <option id="idRumaenien" value="Romania"
                 selected="selected">Rumänien</option>
      </select></p>
   </form>
   <p><script>

      var tx = document.forms[0].elements[0].value + " "
         + document.forms["f"].elements["land"].value + " "
         + document.f.land.value + " "
         + document.getElementsByTagName("form")[0].elements[0].value
         + " " + document.getElementsByTagName("select")[0].value
         + " " + document.getElementById("idLand").value + "<br>";

      tx += document.forms[0].elements[0].options[1].value + " "
         + document.getElementsByTagName("option")[1].value + " "
         + document.getElementById("idSpanien").value;
      document.write(tx);

   </script></p>
</body></html>

Listing 7.15 Datei »form_zugriff.htm«

Im Dokument gibt es ein Formular. Es enthält als einziges Element ein Auswahlmenü mit drei Optionen. Es werden drei Ländernamen in Deutsch angezeigt. Nach einer Auswahl durch den Benutzer stellt der Ländername in Englisch den Wert des Formularelements dar. Das HTML-Attribut value und die JavaScript-Eigenschaft value enthalten diesen Wert,

Er wird hier zur Verdeutlichung der verschiedenen Möglichkeiten insgesamt sechsmal ausgegeben:

als Wert des ersten Elements des ersten Formulars im Dokument

als Wert des Elements mit dem Namen land des Formulars mit dem Namen f

als Wert des Feldelements land des Feldelements f des Dokuments

als Wert des ersten Elements des ersten Feldelements, das mithilfe von getElementsByTagName("form") ermittelt wird

als Wert des ersten Feldelements, das mithilfe von getElementsByTagName("select") ermittelt wird

als Wert des Dokumentelements mit der ID idLand

In diesem Buch bevorzuge ich die letztgenannte Schreibweise.

Anschließend wird noch auf den Wert einer bestimmten Option zugegriffen. Dabei muss es sich nicht um die ausgewählte Option handeln. Sie wird hier insgesamt dreimal ausgegeben:

als Wert der zweiten Option des ersten Elements des ersten Formulars im Dokument
als Wert des zweiten Feldelements, das mithilfe von getElementsByTagName("option") ermittelt wird
als Wert des Dokumentelements mit der ID idSpanien

Die Ausgabe sehen Sie in Abbildung 7.17.

Abbildung 7.17 Zugriff auf Werte von Formularelementen

7.8.2 Formulare kontrollieren, Textfelder

Eine wichtige Aufgabe von JavaScript ist die Kontrolle der Inhalte eines Formulars auf Richtigkeit und Vollständigkeit, bevor es abgesandt wird. Dieser Vorgang wird Validierung genannt. Es wird geprüft, ob das Formular valide ist, d. h. gültige Inhalte hat .

Diese Validierung ersetzt allerdings nicht eine weitere Kontrolle auf der Empfangsseite beim Webserver, da der Benutzer möglicherweise JavaScript abgeschaltet hat.

In diesem Abschnitt werden verschiedene Textfelder kontrolliert. Als Erstes möchten Sie wissen: Ist das Textfeld leer oder nicht? Falls Sie darüber hinaus herausfinden möchten, ob bestimmte Inhalte vorhanden sind, können Sie mit regulären Ausdrücken arbeiten, siehe Abschnitt 6.2.5.

Im folgenden Beispielprogramm sehen Sie einige typische Textfelder: zwei einzeilige Textfelder, ein mehrzeiliges Textfeld (Textarea ) und ein Passwortfeld. Die beiden einzeiligen Textfelder sind als Pflichtfelder gekennzeichnet. Falls eines davon leer ist, erscheint ein Hinweis für den Benutzer und das Formular wird nicht abgesandt.

Formularelemente besitzen drei wichtige Attribute:

Das Attribut value bzw. die JavaScript-Eigenschaft value enthält den Wert des Elements.

Das Attribut id identifiziert das Element für JavaScript. Diese Identifizierung können Sie zusammen mit der Eigenschaft value zur Kontrolle einsetzen.

Das Attribut name identifiziert das Element für die Weiterverarbeitung der Daten auf dem Webserver. In diesem Zusammenhang wird ebenfalls das Attribut value benötigt.

Zur Darstellung eines realistischen Ablaufs wird die Datei mit dem Formular über den lokalen Webserver aufgerufen. Nach dem erfolgreichen Absenden liefert der Webserver mithilfe von PHP eine Antwort zurück, wie Sie dies schon in Abschnitt 4.2.3 gesehen haben.

Außerdem wird gezeigt, wie Sie die Inhalte der Textfelder per JavaScript ändern können, falls sich dies aus bestimmten Aktionen des Benutzers ergeben sollte.

Das Formular sehen Sie in Abbildung 7.18. Einige Felder sind bereits vom Benutzer ausgefüllt. Beim Versuch des Absendens wird bemerkt, dass noch kein Vorname eingetragen ist. Es erscheint eine Meldung neben dem Feld. Nach dem vollständigen Ausfüllen erscheint die PHP-Antwort, siehe Abbildung 7.19.

Abbildung 7.18 Formular mit Kontrolle

Abbildung 7.19 Antwort des Webservers

Es folgt zunächst der zweite Teil des Programms:

...
<body>
   <form id="idForm" method="post" action="form_text.php">
      <p><input id="idNachname" size="30" name="nn" value="Wagner">
            Nachname (*) <span id="idNachnameMeldung"> </span></p>
      <p><input id="idVorname" size="30" name="vn"> Vorname  (*)
            <span id="idVornameMeldung"> </span></p>
      <p><textarea rows="3" cols="25" id="idBem"
                   name="bem">Hier steht etwas</textarea> Bemerkung</p>
      <p><input id="idPasswort" size="30" name="pw"
                type="password"> Passwort</p>
      <p><input id="idAendern" type="button" value="Formular ändern"></p>
      <p><input type="submit"><input type="reset"></p>
      <p>(*) = Pflichtfeld</p>
   </form>
   <script>

      document.getElementById("idForm")
         .addEventListener("submit", function(e) {return senden(e);} );
      document.getElementById("idAendern")
         .addEventListener("click", aendern );

   </script>
</body></html>

Listing 7.16 Datei »form_text.htm«, zweiter Teil

Hinter den beiden Pflichtfeldern steht jeweils ein span-Container. Er dient zur Ausgabe einer Fehlermeldung, falls das Pflichtfeld leer ist. Die span-Container sind vorbesetzt, hier mit einem Leerzeichen. Ansonsten würde die Fehlermeldung nicht erscheinen.

Das Absenden des Formulars führt zum Aufruf der Funktion senden(). Dabei wird ein Ereignisobjekt übermittelt, siehe Abschnitt 4.4. Dieses wird benötigt, um den Sendevorgang abbrechen zu können. Die Funktion senden() muss außerdem einen Wahrheitswert zurückliefern: Bei true wird gesendet, bei false wird nicht gesendet.

Es folgt der erste Teil des Dokuments:

<!DOCTYPE html><html><head><meta charset="utf-8">
   <title>Formulare, Textfelder</title>
   <script>

      function pruefen(idFeld)
      {
         var idMeldung = idFeld + "Meldung";
         var fehler = false;
         if(document.getElementById(idFeld).value == "")
         {
            document.getElementById(idMeldung).firstChild.nodeValue =
               "(Bitte etwas eintragen)";
            fehler = true;
         }
         else
            document.getElementById(idMeldung).firstChild.nodeValue = "";
         return fehler;
      }

      function senden(e)
      {
         var pn = pruefen("idNachname");
         var pv = pruefen("idVorname");
         if(pn || pv)
         {
            e.preventDefault();
            return false;
         }
         else
            return true;
      }

      function aendern()
      {
         document.getElementById("idNachname").value = "Wagner";
         document.getElementById("idVorname").value = "Peter";
         document.getElementById("idBem").value = "Zeile 1\nZeile 2";
      }

   </script>
</head>
...

Listing 7.17 Datei »form_text.htm«, erster Teil

Innerhalb der Funktion senden() wird für jedes Formularelement, das geprüft werden soll, die Funktion pruefen() aufgerufen. Falls in der Funktion pruefen() festgestellt wird, dass im betreffenden Element nichts eingetragen ist, erscheint eine Fehlermeldung. Außerdem wird dann die Variable fehler mit dem Wert true zurückgesendet. Falls etwas eingetragen ist, wird die Fehlermeldung wieder gelöscht.

Hinweis

Warum wird wieder gelöscht? Nehmen wir an, dass das Formular eine ganze Reihe von Pflichtfeldern enthält. Es könnte dann mehrere Versuche des Benutzers geben, das Formular vollständig und richtig auszufüllen. Er soll aber immer nur die Fehlermeldungen des letzten Versuchs sehen.

Falls ein Fehler in einem der Formularelemente aufgetreten ist, dann soll das Absenden verhindert werden. Die Methode preventDefault() des Ereignisobjekts verhindert eine weitere Bearbeitung eines Ereignisses. Hier handelt es sich um das Ereignis Klick auf die »Submit«-Schaltfläche. Zusätzlich wird beim Auftreten eines Fehlers der Wert false zurückgeliefert. Ist kein Fehler aufgetreten, wird der Wert true zurückgeliefert.

In der Funktion aendern() erhalten die Textfelder einen Inhalt per JavaScript-Code.

Die Verzweigung zu Beginn der Funktion senden() könnte auch wie folgt beginnen:

if(pruefen("idNachname") || pruefen("idVorname")) ...

Allerdings sollen die beiden Prüfungen für den Nachnamen und den Vornamen voneinander unabhängig stattfinden, damit die Fehlermeldung jeweils gesetzt oder gelöscht wird. Falls jedoch die Prüfung für den Nachnamen bereits den Wahrheitswert true ergäbe, wäre dies aufgrund der Oder-Verknüpfung ausreichend, um den Wahrheitswert der gesamten Bedingung auf true zu setzen. Daher würde die Funktion zur Prüfung des Vornamens nicht mehr aufgerufen. Das wäre nicht das gewünschte Ergebnis. Daher werden beide Prüfungen vor der Verzweigung durchgeführt. Das Ergebnis wird jeweils in einer Variablen gespeichert, die anschließend für die Verzweigung genutzt wird.

Hinweis

Dieses festgelegte Verhalten bei einer logischen Verknüpfung wird auch Short-Circuit (deutsch: Kurzschluss ) genannt. Ebenso würde der zweite Teil einer logischen Und-Verknüpfung nicht mehr durchgeführt werden, falls der erste Teil bereits den Wahrheitswert false ergäbe.

7.8.3 RadioButtons und CheckBoxen

In diesem Abschnitt erläutere ich die Eigenschaften von RadioButtons und CheckBoxen . Auch diese Formularelemente besitzen das Attribut name zur Übermittlung der Daten an den Webserver. Bei RadioButtons dient es zusätzlich zur Kennzeichnung der Zugehörigkeit zur selben Gruppe.

Das Attribut value enthält den Wert, der kontrolliert und übermittelt wird. Dieser Wert und der sichtbare Text neben dem Formularelement können übereinstimmen, müssen aber nicht. Im vorliegenden Beispiel handelt es sich bei den sichtbaren Texten um deutsche Ländernamen. Als Wert des Attributs value ist der zugehörige englische Ländername eingetragen.

Das HTML-Attribut checked und die boolesche Eigenschaft checked in JavaScript legen sowohl beim RadioButton als auch bei der CheckBox fest, ob das Element markiert ist oder nicht.

Im folgenden Beispielprogramm sehen Sie drei RadioButtons und zwei CheckBoxen. Auch dieses Programm wird über den lokalen Webserver aufgerufen und ruft eine PHP-Antwort hervor.

Die Formularelemente können ebenfalls per JavaScript geändert werden. Neben der Änderung von Markierungen zeige ich, wie Sie per Code einen weiteren RadioButton hinzufügen.

Das bereits geänderte Formular sehen Sie in Abbildung 7.20, die PHP-Antwort des Webservers dann in Abbildung 7.21.

Abbildung 7.20 RadioButtons und CheckBoxen

Abbildung 7.21 Antwort des Webservers

Es folgt zunächst der zweite Teil des Programms:

...
<body>
   <form id="idForm" method="post" action="form_check.php">
      <p id="idAbsatzLand1">Land 1:
         <input name="land1" type="radio" value="Estonia" 
                checked="checked">Estland
         <input name="land1" type="radio" value="Latvia">Lettland
         <input name="land1" type="radio" value="Lithuania">Litauen</p>
      <p>Land 2: <input id="idCheck2" name="land2" type="checkbox"
            value="Sweden">Schweden</p>
      <p>Land 3: <input id="idCheck3" name="land3" type="checkbox"
            value="Finland" checked="checked">Finnland</p>
      <p><input id="idAendern" type="button" value="Formular ändern"></p>
      <p><input type="submit"><input type="reset"></p>
   </form>
   <script>

      document.getElementById("idForm").addEventListener
         ("submit", function() { return senden(); } );
      document.getElementById("idAendern")
         .addEventListener("click", aendern );

   </script>
</body></html>

Listing 7.18 Datei »form_check.htm«, zweiter Teil

Der Absatz, der die drei RadioButtons enthält, besitzt eine eigene ID. Damit wird es möglich, am Ende des Absatzes einen weiteren RadioButton hinzuzufügen. Es folgt der erste Teil des Dokuments:

<!DOCTYPE html><html><head><meta charset="utf-8">
   <title>RadioButton, CheckBox</title>
   <script>

      function senden()
      {
         var tx = "";
         var absatz = document.getElementById("idAbsatzLand1");
         var radFeld = absatz.getElementsByTagName("input");
         for(let i=0; i<radFeld.length; i++)
            if(radFeld[i].checked)
               tx += "Land 1: " + radFeld[i].value + "\n";
     
         if(document.getElementById("idCheck2").checked) tx += "Land 2: "
            + document.getElementById("idCheck2").value + "\n";
         if(document.getElementById("idCheck3").checked) tx += "Land 3: "
            + document.getElementById("idCheck3").value + "\n";

         alert(tx);
         return true;
      }

      function aendern()
      {
         document.getElementById("idCheck2").checked = true;
         var absatz = document.getElementById("idAbsatzLand1");
         var radFeld = absatz.getElementsByTagName("input");
         radFeld[2].checked = true;
   
         if(radFeld.length == 3)
         {
            let neu = document.createElement("input");
            neu.name = "land1";
            neu.type = "radio";
            neu.value = "Poland";
            absatz.appendChild(neu);
            let text = document.createTextNode("Polen");
            absatz.appendChild(text);
         }
      }

   </script>
</head>
...

Listing 7.19 Datei »form_check.htm«, erster Teil

In der Funktion senden() wird der Wert der Eigenschaft checked der drei RadioButtons und der beiden CheckBoxen im ersten Absatz geprüft. Der Wert des einzigen markierten RadioButtons wird ausgegeben. Außerdem wird der Wert jeder markierten CheckBox ausgegeben.

In der Funktion aendern() werden zunächst eine CheckBox und ein RadioButton markiert.

Falls es bisher drei RadioButtons gibt, dann wird anschließend ein weiterer RadioButton inklusive erläuterndem Text hinzugefügt. Dies wird mithilfe der Methoden createElement() und createTextNode() des document-Objekts und der Methode appendChild() für ein node-Objekt durchgeführt.

Der RadioButton erhält Werte für die Eigenschaften type und value. Der Wert der Eigenschaft name sorgt dafür, dass er zur Gruppe der drei anderen RadioButtons gehört. Am Ende des Absatzes wird der sichtbare Text für den RadioButton angehängt.

7.8.4 Auswahlmenüs

In diesem Abschnitt erkläre ich die Eigenschaften von einfachen und mehrfachen Auswahlmenüs . Sie bieten dem Benutzer bekanntlich dasselbe wie RadioButtons und CheckBoxen: die Auswahl einer oder mehrerer Optionen aus einer Gruppe. Die Attribute id, name und value haben dieselbe Wirkung wie bei den bisher behandelten Formularelementen.

Das HTML-Attribut selected und die boolesche Eigenschaft selected in JavaScript legen fest, ob eine Option markiert ist oder nicht.

Im folgenden Beispielprogramm sehen Sie ein einfaches Auswahlmenü und ein mehrfaches Auswahlmenü. Das Programm wird ebenfalls über den lokalen Webserver aufgerufen und ruft eine PHP-Antwort hervor.

Ich zeige, wie Sie eine Auswahl per Code ändern und wie Sie eine weitere Option hinzufügen können. Das bereits geänderte Formular sehen Sie in Abbildung 7.22, die PHP-Antwort in Abbildung 7.23.

Abbildung 7.22 Auswahlmenüs

Abbildung 7.23 Antwort des Webservers

Es folgt zunächst der zweite Teil des Programms:

...
<body>
   <form id="idForm" method="post" action="form_select.php">
      <p>Land 1: <select id="idEinfach" name="land1">
            <option value="Italy" selected="selected">Italien</option>
            <option value="Spain">Spanien</option>
            <option value="Romania">Rumänien</option>
         </select></p>
      <p>Land 2 bis 4:
         <select id="idMehrfach" name="land2bis4[]" multiple="multiple">
            <option value="Belgium" selected="selected">Belgien</option>
            <option value="Netherlands">Niederlande</option>
            <option value="Luxembourg"
                    selected="selected">Luxemburg</option>
         </select></p>
      <p><input id="idAendern" type="button" value="Formular ändern"></p>
      <p><input type="submit"><input type="reset"></p>
   </form>
   <script>

      document.getElementById("idForm").addEventListener
         ("submit", function() { return senden(); } );
      document.getElementById("idAendern")
         .addEventListener("click", aendern );

   </script>
</body></html>

Listing 7.20 Datei »form_select.htm«, zweiter Teil

Beachten Sie den Namen des mehrfachen Auswahlmenüs. Die beiden eckigen Klammern werden für die Antwort des Webservers benötigt, damit innerhalb des PHP-Programms ein Feld mit allen ausgewählten Optionen zur Verfügung steht. So sieht der erste Teil des Dokuments aus:

<!DOCTYPE html><html><head><meta charset="utf-8">
   <title>Auswahlmenüs</title>
   <script>

      function senden()
      {
         var tx = "Land 1: "
            + document.getElementById("idEinfach").value + "\n";
         var optMehrfach = document.getElementById("idMehrfach").options;
         for(let i=0; i<optMehrfach.length; i++)
            if(optMehrfach[i].selected)
               tx += "Land " + (i+2) + ": " + optMehrfach[i].value+"\n";
         alert(tx);
         return true;
      }

      function aendern()
      {
         var selEinfach = document.getElementById("idEinfach");
         selEinfach.value = "Romania";
         document.getElementById("idMehrfach").options[1].selected=true;

         if(selEinfach.options.length == 3)
         {
            let neu = document.createElement("option");
            neu.value = "Bulgaria";
            let text = document.createTextNode("Bulgarien");
            neu.appendChild(text);
            selEinfach.appendChild(neu);
         }
      }

   </script>
</head>
...

Listing 7.21 Datei »form_select.htm«, erster Teil

In der Funktion senden() wird beim einfachen Auswahlmenü nur der Wert der Eigenschaft value benötigt. Beim mehrfachen Auswahlmenü muss der Wert der Eigenschaft selected jeder Option geprüft werden.

In der Funktion aendern() wird der Wert des einfachen Auswahlmenüs über die Eigenschaft value festgelegt. Beim mehrfachen Auswahlmenü wird der Wert der Eigenschaft selected einer einzelnen Option geändert.

Falls es bisher drei Optionen gibt, dann wird anschließend eine weitere Option hinzugefügt. Sie erhält einen Wert für die Eigenschaft value und einen Kindknoten für den sichtbaren Text.

7.8.5 Versteckte Formularelemente

Sie können auch versteckte Formularelemente dazu nutzen, Informationen an den Webserver zu übermitteln. Wie der Name schon sagt, sind diese Informationen für den Betrachter nicht direkt sichtbar. Dies gilt allerdings nur, falls die POST-Methode zum Senden verwendet wird.

Dabei gibt es aber auch einen Nachteil gegenüber der reinen JavaScript-Technik, die sie in Abschnitt 7.3.2, »Senden von Datei zu Datei«, kennengelernt haben: Es ist eine Weiterverarbeitung beim Webserver notwendig.

Sie können den Wert eines versteckten Formularelements von vornherein festlegen oder ihn auch per JavaScript-Code ändern.

Das folgende Beispiel wird über den lokalen Webserver abgerufen. Der Benutzer kann einen von mehreren Hyperlinks betätigen. Die zugehörige Information wird anschließend mithilfe eines versteckten Formularelements an den Webserver übermittelt. In Abbildung 7.24 sehen Sie das Dokument, in Abbildung 7.25 eine mögliche Antwort des Webservers.

Abbildung 7.24 Hyperlinks und versteckte Formularelemente

Abbildung 7.25 Antwort des Webservers

Es folgt das Programm:

<!DOCTYPE html><html><head><meta charset="utf-8">
   <title>Versteckte Elemente</title>
   <script>

      function senden(x)
      {
         document.getElementById("idVersteckt").value = x;
         document.getElementById("idForm").submit();
      }

   </script>
</head>
<body>
   <form id="idForm" method="post" action="form_link.php">
      <p><input id="idVersteckt" name="land" type="hidden"></p>
   </form>
   <p><a id="idLink0" href="#">Italien</a></p>
   <p><a id="idLink1" href="#">Spanien</a></p>
   <p><a id="idLink2" href="#">Rumänien</a></p>
   <script>

      document.getElementById("idLink0").addEventListener
         ("click", function() {senden('Italy');} );
      document.getElementById("idLink1").addEventListener
         ("click", function() {senden('Spain');} );
      document.getElementById("idLink2").addEventListener
         ("click", function() {senden('Romania');} );

   </script>
</body></html>

Listing 7.22 Datei »form_link.htm«

Das Formular sendet seine Daten an die Datei form_link.php. Es enthält ein verstecktes Element. Dieses ist durch den Wert hidden des Attributs type gekennzeichnet. Bei den Hyperlinks sind keine expliziten Verweisziele angegeben. Die Betätigung eines der Hyperlinks führt zum Aufruf der JavaScript-Funktion senden(). In dieser Funktion wird dem versteckten Element der Wert des Parameters übergeben. Anschließend führt der Aufruf der Methode submit() zum Absenden des Formulars.

7.8.6 Bedienung mit Return-Taste

Sie kommen bei der Bedienung eines Formulars mithilfe der Taste (ê) von einem Formularelement zum nachfolgenden Formularelement. Eine zusätzliche und in vielen Fällen komfortablere Bedienung ergibt sich mithilfe der Taste (¢), falls Sie die Vorgehensweise des nachfolgenden Programms nutzen:

<!DOCTYPE html><html><head><meta charset="utf-8">
   <title>Return-Taste</title>
   <script>

      function tasteAbwaerts(e)
      {
         if(e.keyCode == 13)
            if(this.naechstes)
               this.naechstes.focus();
      }

      function speichern()
      {
         document.getElementById("idForm").submit();
      }

   </script>
</head>
<body>
   <form id="idForm" action="returntaste.php" method="post">
      <p>Feld A <input name="fa" id="idF0"></p>
      <p>Feld B <input name="fb" id="idF1"></p>
      <p>Feld C <input name="fc" id="idF2"></p>
      <p>Feld D <input name="fd" id="idF3"></p>
      <input type="button" id="idF4" value="Speichern"
             onClick="speichern();">
   </form>

   <script>

      for(let i=0; i<4; i++)
      {
         document.getElementById("idF" + i)
            .addEventListener("keydown", tasteAbwaerts);
         document.getElementById("idF" + i).naechstes =
            document.getElementById("idF" + (i+1));
      }

   </script>
</body></html>

Listing 7.23 Datei »returntaste.htm«

Die Technik wird am Beispiel eines Formulars mit insgesamt fünf Formularelementen verdeutlicht. Es gibt vier Eingabefelder und eine allgemeine Schaltfläche, siehe auch Abbildung 7.26. Sie haben IDs mit den aufeinanderfolgenden Bezeichnungen idF0 bis idF4.

Allen vier Eingabefeldern wird für das Ereignis keydown, also das Herunterdrücken einer Taste , derselbe EventListener zugeordnet, und zwar die Funktion tasteAbwaerts().

Außerdem erhalten die Objekte der vier Eingabefelder die neue Eigenschaft naechstes, deren Wert auf das jeweils nachfolgende Formularelement verweist. Das vierte und letzte Eingabefeld verweist damit auf die Schaltfläche.

Innerhalb der Funktion tasteAbwaerts() wird der Code der gedrückten Taste geprüft. Handelt es sich um die Taste (¢) mit dem Code 13, wird geprüft, ob das betreffende Formularelement die Eigenschaft naechstes besitzt. Ist das der Fall, wird für das nachfolgende Formularelement die Methode focus() aufgerufen, die den Cursor in dieses Formularelement setzt.

Falls es sich bei dem nachfolgenden Formularelement um ein weiteres Eingabefeld handelt, kann der Benutzer unmittelbar mit der Eingabe fortfahren. Falls es sich um die Schaltfläche handelt, wird damit gleichzeitig das Betätigen der Schaltfläche ausgelöst und das Formular wird gesendet.

Zum Vergleich:

Falls auf herkömmliche Weise mit der Taste (ê) zur Schaltfläche gewechselt wird, ist noch eine weitere Betätigung der Taste (¢) zum Absenden notwendig.
Falls statt einer allgemeinen Schaltfläche eine Schaltfläche des Typs submit verwendet wird, führt jede Betätigung der Taste (¢), auch mitten im Formular, zum Absenden.

Abbildung 7.26 Formular mit Eingabefeldern und allgemeiner Schaltfläche

7.8.7 Lernspiel: Hauptstädte der Europäischen Union

Im Downloadpaket zum Buch finden Sie als Bonus das Programm form_eu.htm mit vielen erläuternden Kommentaren. In einem Formular werden vier zufällig gewählte Länder und die zugehörigen Hauptstädte angezeigt. Der Benutzer soll die Hauptstädte richtig zuordnen .

Nach der Betätigung der Schaltfläche Prüfen (siehe Abbildung 7.27) werden dem Benutzer die richtigen Lösungen angezeigt (siehe Abbildung 7.28), so dass er sie erlernen kann.

Abbildung 7.27 Lernspiel, Hauptstädte der Europäischen Union

Abbildung 7.28 Bewertung und Lernen

7.8.8 Dynamische Änderung von Auswahlmenüs

Im Downloadpaket zum Buch finden Sie außerdem als Bonus das Programm form_doppel.htm mit vielen erläuternden Kommentaren. In einem Formular werden zwei Auswahlmenüs angezeigt. Im ersten Auswahlmenü steht eine Reihe von Ländern. Das zweite Auswahlmenü enthält eine Reihe von Städten innerhalb des ausgewählten Landes.

Die ausgewählte Stadt wird in einem eigenen Absatz angezeigt, siehe Abbildung 7.29. Sobald der Benutzer ein anderes Land auswählt, wird der Inhalt des zweiten Auswahlmenüs geändert. Es enthält dann nur noch Städte des neu ausgewählten Landes.

Abbildung 7.29 Dynamische Änderung von Auswahlmenüs