Java Reference
In-Depth Information
Listing 12.3■ Zugrif auf den Wert des Formularfelds a im Formular mit dem Namen a
window.document.a.a.value = "Text";
Diese Wahl gleicher Namen sowohl für das Formular als auch eines der darin enthaltenen For-
mularelemente wurde nur aus Demonstrationszwecken gezeigt und sollte in der Praxis tun-
lichst unterbleiben. Denn insbesondere beim Zugrif über document.getElementsByName()
ist die Sache nicht mehr unkritisch, da man leicht mit der Indizierung durcheinanderkom-
men kann.
12.3.1.2■Zugrif auf Optionsfelder und Kontrollkästchen
Die eben gezeigte Technik beantwortet nun aber noch nicht die Frage, wie man auf den
Selektionszustand eines Optionsfelds oder eines Kontrollkästchens zugreifen kann? Hierfür
dient ja die Eigenschat value nicht. Aber sowohl die Objektrepräsentation von Optionsfel-
dern als auch Kontrollkästchen in einer Webseite verfügen über die boolesche Eigenschat
checked . Diese korrespondiert mit dem entsprechenden (X)HTML-Attribut und ist aus
JavaScript heraus sowohl zu lesen als auch zu schreiben. Hat diese Eigenschat den Wert
true , ist das Formularelement selektiert. Hat sie aber den Wert false , ist das Formularele-
ment jedoch deselektiert. Beispiel (kap12_2.html):
Listing 12.4■ Das Basisformular
...
<script src="lib/js/kap12_2.js" type="text/javascript"></script>
</head>
<body>
<h1>Selektionszustand von Radiobutton und Checkboxen</h1>
<form>Herr <input type="Radio" name="a" value="mann">
Frau <input type="Radio" name="a" value="frau"><br/>
<input type="checkbox" value="werbung" /> Newsletter</form>
<h4>Selektionszustand</h4><div id="zustand"></div>
</body>
</html>
In diesem Beispiel inden Sie in dem Webformular zwei Optionsfelder und ein Kontrollkäst-
chen per (X)HTML deiniert. Hier ist die JavaScript-Datei kap12_2.js:
Listing 12.5■ Auslesen des Selektionszustands von Elementen
function check() {
document.getElementById("zustand").innerHTML =
"Selektionszustand von " + this.value + ": " + this.checked;
}
window.onload = function() {
document.forms[0].elements[0].defaultChecked = true;
for ( i = 0; i < document.forms[0].length; i++) {
document.forms[0].elements[i].onclick = check;
}
};
In der Funktion check() , die über den Eventhandler onclick bei jedem Element des Web-
formulars aufgerufen wird, wird je nach Zustand des auslösenden Formularelements eine
unterschiedliche Meldung angezeigt. Zur Registrierung verwenden wir eine Schleife inner-
 
Search WWH ::




Custom Search