Selektionszustände, Daten verschicken

Zugriff auf den Selektionszustand von einem Optionsfeld oder einem Kontrollkästchen

Die eben gezeigte Technik zeigt noch nicht, wie man auf den Selektionszustand von einem Optionsfeld oder einem Kontrollkästchen zugreifen kann? Hier steht ja die Eigenschaft value nicht zur Verfügung.

Aber sowohl die Objektrepräsentation von Optionsfeldern als auch Kontrollkästchen in einer Webseite verfügen über die Boolesche Eigenschaft checked. Diese korrespondiert mit dem entsprechenden (X)HTML-Attribut und ist aus JavaScript heraus sowohl zu lesen als auch zu schreiben.

Hat diese Eigenschaft den Wert true beziehungsweise 1 (Genau genommen wird jeder numerische Wert ungleich 0 als true interpretiert.), ist das Formularelement selektiert. Hat sie aber den Wert false beziehungsweise 0, ist das Formularelement deselektiert.

Beispiel:

<html>
 <script language="JavaScript">
  function testRadioButton() {
    if(window.document.forms[0].elements[0].checked) {
     document.getElementById("meldung").innerHTML = "Radiobutton Ja selektiert";
    }
    else {
      document.getElementById("meldung").innerHTML = "Radiobutton Nein selektiert";
    }
 }
</script>
<body>
<form>
  Ja <input type="Radio" name="a" value="v">
  Nein <input type="Radio" name="a" value="w"><br />
  <input type="button" value="OK" onClick="testRadioButton()" />
</form>
<div id="meldung"></div>
</body>
</html>

In dem Beispiel wird ein Webformular mit zwei Optionsfeldern per (X)HTML definiert. Die Funktion testRadioButton(), die in diesem Beispiel über den Eventhandler onClick bei dem einfachen Button aufgerufen wird, dient zum Überprüfen des Zustands von dem ersten Radiobuttons. Anschließend wird je nach Zustand eine unterschiedliche Meldung angezeigt. Die Überprüfung von nur einem Radiobutton genügt, denn durch die Gruppierung des zweiten Radiobuttons über das identische name-Attribut ist dieser immer deselektiert, wenn der erste Radiobutton selektiert ist, und umgekehrt.

Beispiel 3: Webformular mit zwei Optionsfeldern wird per JavaScript ausgewertet

Zugriff auf Elemente einer Auswahlliste

Nun bleibt noch die Antwort auf die Frage übrig, wie Sie auf die Elemente einer Auswahlliste in einem Listenfeld zugreifen? Hier steht die Eigenschaft value zwar nicht beim umgebenden <select>-Container zur Verfügung, aber bei den enthaltenen Elementen vom Typ <option>.

Wenn Sie bei einer Auswahlliste einen JavaScript-Zugriff über Objektfelder wählen, referenzieren Sie mit dem elements-Objektfeld den <select>-Container, jedoch noch nicht die einzelnen Einträge in den <option>-Containern.

Jede Objektrepräsentation von einem Formularelement, die einen <select>-Container verkörpert, verfügt jedoch als Eigenschaft über das Objektfeld options. Dieses stellt ein untergeordnetes Datenfeld mit Objektrepräsentationen von den <option>-Containern dar und korrespondiert unmittelbar mit dem <option>-Element in der Auswahlliste. Sie haben darüber also vollständigen Zugriff auf die Einträge in einer Auswahlliste innerhalb eines Formulars. Die Einträge in einer Auswahlliste können im Prinzip dann wie jedes andere Formularelement mit einer Indexnummer oder dem Namen angesprochen werden.

Das Verschicken und Zurücksetzen von Formulardaten per JavaScript

Wenn Sie kein JavaScript anwenden, werden Formulardaten mittels eines (X)HTML-Submit-Buttons verschickt. Aber jede Objektrepräsentation eines Webformulars besitzt eine zugeordnete Methode submit(). Deren Aufruf schickt ebenfalls die Werte in dem Formular ab. Sie können damit das Abschicken der Formulardaten dem Klick auf einem Hyperlink, einem einfachen Button oder jeder anderen Situation zuordnen, die sich mit einem Eventhandler beschreiben lässt.

Beispiel:

<html>
<body>

<form action="nix.php" method="get">

<input name="a" />

<input name="b" />

<input name="b" /><br />

<input type="button" value="OK" onClick="window.document.forms[0].submit()" />

</form>

</body>

</html>

In dem einfachen Webformular wird mit dem Eventhandler onClick die Methode submit() aufgerufen und damit das Formular verschickt (<input type="button" value="OK" onClick="window.document.forms[0].submit()" />).

Mit der Methode reset()können Sie analog das Zurücksetzen einen Formulars auslösen.

Das Interessante bei der Verwendung dieser Methoden ist, dass Sie den Aufruf auch in JavaScript-Funktionen einschließen und mit einer beliebigen Logik versehen können. Hier können Sie beispielsweise Plausibilisierungsfunktionen aufrufen.

Plausibiliserung allgemein: Plausibilisierungskonzepte

Der erste Teil unserer kleinen Serie beschäftigt sich mit Plausibilisierung allgemein und dem Erstellen von Plausibiliserungskonzepten: "Die Plausibilisierung von Webformularen (1): Wo plausibilisieren sich Formular-Daten am besten?".

Plausibilisierung von Webformularen per JavaScript