Inhalt dieses Kapitels:
Erhältlich u.a. bei Amazon.de
5
Betrachtet man HTML-Seiten, so fällt als ein besonderes Element das Formular auf. Dieses vielseitig nutzbare Element bedarf einer besonderen Aufmerksamkeit seitens JavaScript. Die Formulare sind dem Objekt document zugeordnet. Zu diesem Objekt gehört ein Array von Objekten namens forms, welches für jedes Formular ein Arrayelement enthält. Die Elemente sind im Array in der Reihenfolge enthalten, wie die Formulare im HTML-Quelltext auftreten. Zusätzlich ist für jedes Formular mit einem Namen eine eigene Eigenschaft in dem Objekt document vorhanden. Gehört beispielsweise zu dem HTML-Dokument ein Formular mit dem Namen Registrierung, so existiert eine Eigenschaft Registrierung in dem Objekt document: document.Registrierung. Formulare als Eigenschaft des Dokuments, unabhängig ob mit Namen oder im Array, sind ab JavaScript 1.0 verfügbar.
Objekttyp Form
Die Formulare selbst werden durch Objekte des Typs Form repräsentiert. Sie wurden seit JavaScript 1.0 mit den einzelnen Versionen erweitert. Betrachten wir jedoch zunächst den Typ Form selbst, bevor wir zu den einzelnen Formularelementen kommen.
Es sei noch erwähnt, dass insbesondere die Liste der Eigenschaften nicht notwendigerweise vollständig ist. Vor allem kann es sogar bei unterschiedlichen Browsern zu verschiedenen Erweiterungen kommen.
Warum sollte JavaScript in Verbindung mit Formularen interessant sein? Dazu zwei verschiedene Beispiele. Zuerst einmal eine Formularprüfung:
Die Eingaben in ein Formular sollen gewissen Mindestkriterien genügen. Ein im Formular enthaltenes Textfeld soll eine Eingabe enthalten, die mindestens 5 Zeichen lang ist.
<html>
<head>
...
<script language="JavaScript">
<!--
function pruefung(formular)
{
if(formular.eingabe.value.length < 5)
{
alert("Bitte mindestens 5 Zeichen!")
return false
}
return true
}
//-->
</script>
</head>
<body>
...
<form action="..." onSubmit="return pruefung(this)">
<input type="text" name="eingabe">
<input type="submit">
</form>
...
</body>
</html>
Das zweite Beispiel ist ein reines JavaScript-Formular.
Das Formular sendet keine Eingaben an nachgelagerte Programme. Die Aktion wird nur auf dem Client-Rechner ausgeführt. Hier ist ein einfaches Textfeld und ein Button aufgeführt. Klickt man auf den Button, wird das Textfeld mit der aktuellen Zeit gefüllt.
... <form> <input type="text" name="eingabe" size="36"> <input type="button" value="Aktuelle Zeit" onClick="this.form.eingabe.value=(new Date()).toLocaleString()"> </form> ...
Wenn es nicht anders erwähnt wird, existieren die jeweiligen Objekte, Eigenschaften, Methoden und Event-Handler bereits seit JavaScript 1.0.
Der Objekttyp Form repräsentiert ein komplettes Formular aus dem HTML-Dokument. Das Formular wird mit dem HTML-Element <form ...>...</form> gekennzeichnet, beginnt mit dem Start-Tag <form ...> und endet mit dem End-Tag </form>. Für jedes so definierte Formular existiert ein Eintrag in dem Array document.forms. Wurde zudem das Attribut name des HTML-Elements bei dem Start-Tag <form ...> genutzt, so besitzt das Objekt document auch eine Eigenschaft mit diesem Namen.
Ein Objekt des Typs Form hat jeweils eine Eigenschaft, die mit einem entsprechenden Attribut des HTML-Elements <form ...>...</form> korrespondiert. Die wichtigsten sind hier:
Eigenschaften des Objekttyps Form
| Eigenschaft | Beschreibung |
|---|---|
| action | Pendant zum Attribut action |
| elements | Array mit allen Formularelementen - in der Reihenfolge, wie die Elemente im HTML-Quelltext auftreten |
| id | eindeutiger Name, Pendant zum Attribut id; ab HTML 4 (am besten gibt man aus Kompatibilitätsgründen die Attribute id und name an) |
| length | Anzahl der Elemente des Formulars |
| name | Pendant zum Attribut name |
Tabelle 5.1: Eigenschaften des Objekttyps Form
Ebenso verfügen Objekte des Typs Form über eine Reihe von Methoden.
Methoden des Objekttyps Form
| Methode | Beschreibung |
|---|---|
| reset() | Entspricht dem Klick auf den Button Reset (ab JavaScript 1.1) |
| submit() | Schickt das Formular ab - entspricht also grundsätzlich dem Klick auf den Button Submit |
Tabelle 5.2: Methoden des Objekttyps Form
Mit Hilfe der Eigenschaft action kann man beispielsweise ein und dasselbe Formular zum Versand gleich an mehrere Adressen nutzen.
with(document.forms["meinFormular"])
{
action = "/cgi-bin/meinSkript1.pl"
submit()
action = "/cgi-bin/meinSkript2.pl"
submit()
}
Das ist doch praktisch, oder?
Mit den Eigenschaften hat man zum Beispiel Zugriff auf alle Elemente des jeweiligen Formulars. Ein Teil der Eigenschaften und Methoden soll nun noch weiter erläutert werden.
Die Eigenschaft elements enthält alle Elemente (Objekte) des betreffenden Formulars. Zu diesen Elementen gehören typischerweise Objekte wie Text, Button oder Submit. Pro Objekt ist in dem Array ein Element aufgeführt - bis auf das Objekt Radio. Hier ist für jede Option ein Eintrag zu finden. (Ergo: Pro HTML-Element in dem Formular enthält das Array einen Eintrag. Radioknöpfe werden mit mehreren - eher unabhängigen - HTML-Elementen definiert.)
Ein Wert eines Textfelds wird beispielsweise wie folgt gesetzt:
document.forms[4].elements[8].value = "Neuer Wert"
Alternativ (und etwas übersichtlicher) kann die Zuweisung auch mit den Namen des Formulars und des Textfelds erfolgen:
document.meinFormular.meinTextfeld.value = "Neuer Wert" document.forms["meinFormular"].meinTextfeld.value = "Neuer Wert"
Die Zuweisung mit Namen ist wesentlich sicherer, denn den Namen eines Formulars ändert man seltener als das Dokument, in dem es sich befindet. Und die Nummerierung in dem Array forms (oder auch elements) ändert sich unter Umständen gleich mit. Da hat schon so mancher lange nach Fehlern suchen müssen.
Sie wird hier nicht erwähnt, weil sie besonders wichtig oder interessant ist. Vielmehr führt sie unter Umständen zu Verwirrungen. meinFormular.length ist identisch mit meinFormular.elements.length und liefert die Anzahl der Elemente in einem Formular. Zu Verwirrung kann es mit document.forms.length kommen. Diese Eigenschaft liefert die Anzahl der Formulare in dem Dokument.
Der Name des Formulars
Diese Eigenschaft stellt den Unterschied zwischen einem anonymen Formular und einem bekannten dar. Hat ein Formular einen Namen, so kann es direkt mit diesem Namen (als Eigenschaft des Objekts document) angesprochen werden. Ansonsten nur mit dem passenden Index aus dem Array document.forms - und dieser Index kann sich bei einer Umgestaltung der HTML-Seite leicht ändern.
Diese Eigenschaft spiegelt den Wert des Attributs name bei dem HTML-Element <form ...>...</form> wider.
<form ... name="meinFormular" ...>
Die Eigenschaft name kann übrigens nicht nur gelesen werden, sie kann auch geschrieben werden.
Die Methode submit entspricht dem Klick auf den Submit-Button. Zumindest ist dies annähernd so. Aus Sicherheitsgründen benötigt ein Formular mit mailto: oder news: beim Attribut action (Start-Tag <form ...>) ein besonderes Privileg. (Dies hat seinen Grund darin, dass nicht heimlich Mails verschickt werden.)
Ab JavaScript 1.1 wird das Formular kommentarlos nicht abgeschickt, wenn es mit mailto: , news: oder snews: deklariert wurde. In derartigen Formularen ist ein Absenden nur über den Submit-Button möglich, der vor dem Versand darüber informiert, dass private oder sensible Informationen versendet werden.
Der Aufruf der Methode erfolgt mit dem entsprechenden Formular-Objekt, also beispielsweise mit
document.meinFormular.submit()
oder
document.forms[2].submit().
Der JavaScript-Quelltext des Event-Handlers onReset wird ausgeführt, wenn der Reset-Button - HTML-Element <input type="reset" ...> - angeklickt wird. Der Event-Handler ist seit JavaScript 1.1 verfügbar.
Die Lösung für Eingabeprüfungen
Dem Event-Handler onSubmit kommt eine besondere Bedeutung zu, denn er wird ausgeführt, wenn der Submit-Button - HTML-Element <input type="submit" ...> - angeklickt wird. Zu diesem Zeitpunkt ist eine Überprüfung des gesamten Formularinhalts möglich und über einen Rückgabewert kann bestimmt werden, ob die Formulardaten tatsächlich abgeschickt werden oder nicht. Wird mit Hilfe der JavaScript-Anweisung return der Wert true zurückgegeben, so werden die Formulardaten abgeschickt - sonst nicht.
<form ... onSubmit="return formularpruefung(this)"> ... </form>
Ein Formular besteht aus den typischen Elementen wie Textfeldern, Radioknöpfen oder Buttons. Diese sind über das Array elements des Formulars ebenso erreichbar wie über den Namen des jeweiligen Elements. Jedes Formularelement wird durch ein Objekt mit einem geeigneten Objekttyp repräsentiert. In der Liste sind die Objekttypen mit den HTML-Elementen, die für die Anlage zuständig sind, aufgeführt.
Formularelemente, Objekte und HTML-Elemente
| Objekttyp | HTML-Elemente | Beschreibung |
|---|---|---|
| Button | <input type="button" ...> oder <button ...> | Button |
| Checkbox | <input type="checkbox" ...> | Kontrollfeld |
| FileUpload | <input type="file" ...> | Element zum Hochladen von Dateien (Textfeld und passender Button) |
| Hidden | <input type="hidden" ...> | Nicht sichtbares Textfeld |
| Image | <input type="image" ...> | Bild als Submit-Button |
| Password | <input type="password" ...> | Textfeld, bei dem die Eingabe mit Sternchen "*" dargestellt wird |
| Radio | <input type="radio" ...> | Radioknopf |
| Reset | <input type="reset" ...> | Reset-Button |
| Select | <select ...>...</select> | Auswahlliste |
| Submit | <input type="submit" ...> | Submit-Button |
| Text | <input type="text" ...> | Textfeld |
| Textarea | <textarea ...>...</textarea> | Mehrzeiliges Textfeld |
Tabelle 5.3: Formularelemente, Objekte und HTML-Elemente
Der Objekttyp Image kam in Formularen erst mit JavaScript 1.5 hinzu. Bei älteren Versionen lohnt daher die Verwendung dieses Objekttyps leider nicht.
Allen Objekten sind eine Reihe von Eigenschaften, Methoden und Event-Handler gemeinsam. Diese wollen wir vor den individuellen Attributen betrachten.
Eigenschaften der Objekttypen
| Eigenschaft | Beschreibung |
|---|---|
| form | Formular, in dem das Formularelement enthalten ist |
| id | eindeutiger Name, Pendant zum Attribut id; ab HTML 4 (am besten gibt man aus Kompatibilitätsgründen die Attribute id und name an) |
| name | Name des Objekts (Pendant zum Attribut name des entsprechenden HTML-Elements) |
| type | Typ des Objekts (sofern vorhanden, ist dies auch das Pendant zum Attribut type des entsprechenden HTML-Elements) |
| value | Wert des Objekts - nicht beim Objekt Select vorhanden (siehe dort Objekt Option) |
| default... | Kommt in mehreren Varianten je nach HTML-Element vor: defaultValue, defaultChecked oder defaultSelected. Die Eigenschaft spiegelt den Ursprungswert wider (als Pendant zum Attribut value, checked oder selected des entsprechenden HTML-Elements). Wird der Reset-Button angeklickt, werden die Formularinhalte auf den mit dieser Eigenschaft bestimmten Wert zurückgesetzt. |
Tabelle 5.4: Eigenschaften der Objekttypen
Die Eigenschaft type ebenso wie ein Teil der Eigenschaften default... wurden mit JavaScript 1.1 dem Sprachstandard hinzugefügt. Eigenschaften wie type sind recht praktisch, wenn man das Array elements von Objekten des Typs Form durchsucht und wissen möchte, um welchen Objekttyp es sich eigentlich handelt.
Methoden der Objekttypen
| Methode | Beschreibung |
|---|---|
| blur() | Entfernt den Eingabefokus vom Objekt - nicht verfügbar beim Objekt Hidden |
| focus() | Setzt den Eingabefokus auf das Objekt - nicht verfügbar beim Objekt Hidden |
Tabelle 5.5: Methoden der Objekttypen
Die Methoden blur und focus sind bei den Objekttypen Password, Select, Text und Textarea ab JavaScript 1.0 und bei den anderen ab JavaScript 1.1 verfügbar.
Event-Handler der Objekttypen
| Event-Handler | Beschreibung |
|---|---|
| onBlur | Ruft die entsprechende Funktion auf, wenn das Objekt den Eingabefokus verliert - nicht verfügbar beim Objekt Hidden |
| onFocus | Ruft die entsprechende Funktion auf, wenn das Objekt den Eingabefokus erhält - nicht verfügbar beim Objekt Hidden |
Tabelle 5.6: Event-Handler der Objekttypen
Die Event-Handler onBlur und onFocus gehören zum Sprachumfang seit JavaScript 1.1, für die Objekttypen Select, Text und Textarea sogar schon ab JavaScript 1.0.
Zu beachten ist, dass bei allen Event-Handlern das Schlüsselwort this das Objekt selbst bestimmt. Wird beispielsweise das Schlüsselwort this bei einem Event-Handler zu dem Start-Tag <form ...> genutzt, so steht es für das Formular, wird es bei <input type="text" ...> aufgeführt, so repräsentiert es das korrespondierende Objekt Text.
Nach der Auflistung der Eigenschaften, Methoden und Event-Handler wollen wir die wichtigsten gesondert erläutern.
Die Eigenschaft liefert das Formular-Objekt, welches dem Formularelement übergeordnet ist. Das mag unsinnig klingen, weil man das Formular-Objekt bereits kennt. Im Zusammenhang mit den Event-Handlern der Formularelement-Objekte macht es allerdings wieder Sinn, denn dort ist das Formular-Objekt nicht bekannt. Häufig wird es in Verbindung mit dem Schlüsselwort this genutzt.
Hier ein Beispiel für den Einsatz:
Ein Formular enthält eine gewisse Anzahl Elemente. In dem Formular soll ein Button integriert werden, welcher über die genaue Anzahl informiert.
<input type="button" value="Anzahl Formularelemente"
onClick="alert('Elemente: ' + this.form.elements.length)">
Der Name der Elemente
Mit der Eigenschaft name wird der Name des Objekts ermittelt, wie er mit dem Attribut name des entsprechenden HTML-Elements gesetzt wurde. Er darf allerdings auch überschrieben werden. Das Formularelement kann innerhalb des Formulars mit diesem Namen als Eigenschaft direkt angesprochen werden.
document.meinFormular.meinFeld
Haben mehrere Objekte den gleichen Namen, so wird ein Array mit diesem Namen angelegt. Die einzelnen Objekte sind über dieses Array ansprechbar.
document.meinFormular.meinFeld[2]
Grundsätzlich ist dies bei allen Objekten möglich, allerdings Usus nur beim Objekttyp Radio, da hier sowieso mehrere Objekte eine zusammengehörige Gruppe bilden. Besonders Konstruktionen wie diese sind fehlerträchtig:
<INPUT TYPE="TEXT" NAME="meinFeld" ...> <INPUT TYPE="RADIO" NAME="meinFeld" ...> <INPUT TYPE="CHECKBOX" NAME="meinFeld" ...> <INPUT TYPE="RADIO" NAME="meinFeld" ...> <INPUT TYPE="RADIO" NAME="meinFeld" ...>
Hier enthält das Formular tatsächlich ein Array meinFeld mit 5 Elementen. Die zusammengehörigen Radioknöpfe haben die Indizes 1, 3 und 4. Es empfiehlt sich schon bei der Gestaltung eines Formulars, peinlichst darauf zu achten, dass keine Namen mehrfach vergeben werden, wenn diese nicht zusammengehören. Die Programmierung der verarbeitenden JavaScript-Funktionen wird erheblich erleichtert.
Durch die Eigenschaft type ist es möglich, den Typ des Objekts zu ermitteln. Bei dem HTML-Element <input ...> entspricht dies dem Attribut type. Diese Eigenschaft kann logischerweise nur gelesen werden. Beispiele für Werte der Eigenschaft type sind für den Objekttyp Checkbox der Wert checkbox oder für den Objekttyp Text der Wert text. Bei dem Objekttyp Select sind sogar zwei Werte möglich: select-one oder select-multiple. Die Entscheidung für den Typ fällt bei der Anlage des Objekts, abhängig vom Attribut multiple des HTML-Elements <select ...>. Die verschiedenen Typen des Objekts Select sind bei den Erläuterungen des Objekts selbst aufgeführt.
var i
document.open("text/html")
for(i = 0; i < document.meinFormular.elements.length; i++)
{
document.writeln((i + 1) + ". Element: Typ: " +
document.meinFormular.elements[i].type)
}
document.close()
Der Wert der Elemente
Das Attribut value des HTML-Elements der Formularelemente wird durch die Eigenschaft value wiedergegeben. Dies gilt allerdings nicht für das Objekt Select. Dort ist diese Eigenschaft bei dem korrespondierenden Objekt Option zu finden.
Zugegebenermaßen ist diese Eigenschaft eine der am häufigsten verwendeten, denn auf den Wert eines Formularfelds möchte man doch in aller Regel Einfluss nehmen. Und das möchte man doch schon öfters ...
document.meinFormular.meinFeld.value = "Die Antwort lautet 42."
Abweichungen zu dieser allgemeinen Beschreibung sind bei den jeweiligen Objekttypen erläutert.
Mit der Methode focus wird der Eingabefokus auf ein Objekt gesetzt. Dies ist insbesondere dann interessant, wenn ein bestimmtes Feld unbedingt angesteuert werden soll. So kann mit dieser Methode nach dem Laden eines Dokuments der Eingabefokus auf das erste Textfeld eines Formulars gesetzt werden. Ein anderes Anwendungsgebiet ist die Fehlerbehandlung. Wird bei der Formularprüfung festgestellt, dass eine Falscheingabe erfolgt ist oder eine Angabe fehlt, so kann man dies mit einer Meldung anzeigen und gleich anschließend den Eingabefokus auf das betreffende Feld setzen.
alert("Die Eingabe im Feld meinFeld ist nicht korrekt.")
document.meinFormular.meinFeld.focus()
Der Event-Handler führt den angegebenen JavaScript-Quelltext aus, wenn das entsprechende Formularelement den Eingabefokus verliert. Eine Anwendungsmöglichkeit ist die Überprüfung, ob ein Wert angegeben wurde. Das Beispiel zeigt den Aufruf der Funktion erforderlich, falls das entsprechende Textfeld verlassen wird.
<input type="text" onBlur="erforderlich(this.value)">
Eine andere Möglichkeit ist das Füllen anderer Formularfelder in Abhängigkeit vom Inhalt des Textfelds.
Im Gegensatz zum Event-Handler onBlur wird hier der JavaScript-Quelltext bei onFocus ausgeführt, wenn das entsprechende Formularfeld den Eingabefokus erhält, also betreten wird. Auch hier ist es möglich, eine Inhaltsprüfung des Felds vorzunehmen. Allerdings vor einer möglichen Eingabe. Braucht man den Event-Handler wirklich? Ja! Ein kleines praktisches Beispiel dazu:
Bei einem Textfeld soll schon beim Betreten des Felds der bereits vorhandene Inhalt selektiert werden. So wird die Methode select aufgerufen, wenn das Textfeld den Eingabefokus erhält:
<input type="text" onFocus="this.select()">
Selbst definierte Buttons
Ein Button hat ohne JavaScript (oder eine andere clientseitige Skriptsprache) keine nennenswerte Bedeutung. Mit JavaScript wird er richtig zum Leben erweckt. Mit ihm lassen sich zusätzliche Funktionen realisieren, die allein auf der Clientseite ausgeführt werden. Auch reine JavaScript-Formulare sind damit möglich - zum Beispiel ein kleiner Taschenrechner.
Der JavaScript-Quelltext wird ausgeführt, wenn ein Click-Ereignis auftritt - also der Button angeklickt wird. (Ein Klick setzt sich übrigens aus einem MouseDown- und einem MouseUp-Ereignis zusammen.)
<input type="button" value="mein Button" onClick="mach_was()">
Kontrollfeld
Ein Kontrollfeld ist ein kleines Kästchen, welches genau zwei Status kennt: an oder aus. Einen dritten Status "unbestimmt" gibt es in diesem Fall nicht, auch wenn er bei einigen GUIs bereits vorhanden ist. Der Objekttyp ist für alle Elemente geeignet, bei denen die Entscheidung zwischen zwei Status - ähnlich einem Lichtschalter - erfolgt, wobei eigentlich nur der "An"-Status relevant ist.
Abbildung 5.1: Muster Formularelement Checkbox
Zeigt den aktuellen Status des Kontrollfelds an. Die Eigenschaft liefert einen Boole'schen Wert.
meinStatus = document.meinFormular.meinKontrollfeld.checked
Entspricht dem Attribut value des HTML-Elements <input type="checkbox" ...>. Ist das Attribut nicht angegeben und das Kontrollfeld aktiviert, so wird der Wert on an das Formular übergeben. Fragt man ihn ab, ist er allerdings - zumindest bei einigen Browsern - immer on.
Falls das Kontrollfeld angeklickt wird, erfolgt eine Ausführung des bei diesem Event-Handler angegebenen JavaScript-Quelltexts.
Diverse Textfelder
Die vier Objekttypen Hidden, Password, Text und Textarea sind sich prinzipiell sehr ähnlich. Geht man von den entsprechenden Formularfeldern aus, so entspricht Text einem einzeiligen Textfeld, Textarea hat mehrere Zeilen, Password zeigt die Eingabe verdeckt (als Folge von Sternchen) an und Hidden wird gar nicht dargestellt.
Trotzdem haben insbesondere die Objekttypen Hidden und Password im Vergleich mit dem Objekttyp Text ihre Besonderheiten:
Abbildung 5.2: Muster Formularelement Password
Abbildung 5.4: Muster Formularelement Text
Abbildung 5.4: Muster Formularelement Textarea
Der Objekttyp Password kennt diese Eigenschaft, liefert jedoch immer null. Der Objekttyp Hidden kennt diese Eigenschaft nicht, auch wenn er bei manchen Browsern formal verfügbar ist und sogar funktioniert, wenn man ihn per JavaScript setzt.
Wählt den Text des Felds aus und ermöglicht in Zusammenhang mit der Methode focus die leichtere Eingabe in das Feld (mit gleichzeitigem Ersetzen bereits vorhandenen Texts).
Der Objekttyp Hidden kennt diese Methode nicht.
Der JavaScript-Quelltext dieses Event-Handlers wird ausgeführt, wenn sich der Inhalt des Textfelds (abfragbar mit Hilfe der Eigenschaft value) geändert hat und das Formularfeld den Eingabefokus verliert.
Die Objekttypen Hidden und Password kennen diesen Event-Handler nicht.
Der bei diesem Event-Handler angegebene JavaScript-Quelltext wird ausgeführt, wenn Text selektiert wird. (Es gibt allerdings zumindest bis JavaScript 1.3 keine Methode, mit der man den so ausgewählten Text abfragen kann.)
Die Objekttypen Hidden und Password kennen diesen Event-Handler nicht.
Radioknöpfe
Ein Radioknopf erscheint in einem Formular, wenn man das HTML-Element <input type="radio" ...> nutzt. Mehrere Radioknöpfe gleichen Namens gehören jeweils zusammen und bilden eine Gruppe, es kann allerdings immer nur einer gewählt werden. Ebenso ist es möglich, dass kein Radioknopf selektiert wurde. Für jeden Radioknopf wird zur Laufzeit ein Objekt Radio generiert. Radioknöpfe werden genutzt, wenn die Auswahl zwischen mehreren gleichartigen Dingen besteht - mehr als 5 bis 7 werden in der Regel allerdings nie innerhalb einer Gruppe genutzt.
Die einzelnen Objekte einer Gruppe werden in einem Array zusammengefasst, welches den Namen der Radioknöpfe hat. Eine Gruppe mit drei Radioknöpfen mit Namen meinRadioknopf in einem Formular meinFormular besteht aus den drei Objekten
document.meinFormular.meinRadioknopf[0] document.meinFormular.meinRadioknopf[1] document.meinFormular.meinRadioknopf[2]
Jedes Objekt hat hierbei alle Attribute der Gruppe.
Beispiel für die Abfrage des Indexes des gewählten Radioknopfs:
function getRadioIndexSelected(radio)
{
var i
for(i = 0; i < radio.length; i++)
if(radio[i].checked)
return i
return -1
}
Abbildung 5.5: Muster Formularelement Radio
Die Eigenschaft informiert darüber, ob der Radioknopf gewählt ist oder nicht. Der Boole'sche Wert ist true, falls der Radioknopf selektiert ist. Da immer nur ein Radioknopf den Wert true haben kann, werden alle anderen auf false gesetzt, wenn nur einer in der Gruppe auf true gesetzt wird.
Entspricht dem Attribut value des HTML-Elements <input type="radio" ...>. Ist das Attribut nicht angegeben und der Radioknopf aktiviert, so wird der Wert on an das Formular übergeben. Fragt man ihn ab, ist er allerdings - zumindest bei einigen Browsern - immer on. Es macht also schon Sinn, einen Wert anzugeben.
Der bei diesem Event-Handler aufgeführte JavaScript-Quelltext wird ausgeführt, wenn der Radioknopf angeklickt wird. Jeder Radioknopf kann einen eigenen Event-Handler haben, der auch unterschiedliche Aufgaben erledigt. Es ist nicht möglich, gleichzeitig einen Event-Handler für alle Radioknöpfe einer Gruppe zu setzen.
<input type="radio" name="farbe" checked
onClick="farbe='gruen'">grün
<input type="radio" name="farbe" onClick="farbe='rot'">rot
<input type="radio" name="farbe" onClick="farbe='blau'">blau
Auswahlliste
Der Objekttyp Select repräsentiert eine Auswahlliste in einem Formular, bei der man entweder einen oder mehrere Einträge auswählen kann - je nachdem, ob das Attribut multiple bei dem Element <select ...> gesetzt ist oder nicht.
Der Objekttyp steht in direkter Verbindung mit dem Objekttyp Option, der die einzelnen Einträge in der Auswahlliste widerspiegelt, d.h., für jeden Eintrag gibt es ein Objekt des Typs Option.
Abbildung 5.6: Muster Formularelement Select
Diese Eigenschaft ist identisch mit options.length.
Das Array options beinhaltet alle Einträge der Auswahlliste. Jedes Arrayelement ist vom Objekttyp Option. Dieses Array kann durch neue Optionen erweitert oder durch andere ersetzt werden.
Die Eigenschaft liefert den Wert -1, wenn kein Eintrag selektiert ist. Sobald ein Eintrag gewählt wurde, bestimmt diese Eigenschaft die Option, die selektiert wurde. (Zu beachten ist, dass das Array options auch hier mit 0 beginnt.) Sind mehrere Einträge selektierbar - also das Attribut multiple bei dem Element <select ...> gesetzt -, so bestimmt die Eigenschaft den ersten gewählten Eintrag. Alle selektierten Einträge lassen sich mit Hilfe des Arrays options und einer entsprechenden Eigenschaft des Objekttyps Option ermitteln.
Der Typ kann bei dem Objekttyp Select zwei verschiedene Werte annehmen: select-one oder select-multiple. Die Eigenschaft hat den Wert select-one, wenn bei dem Element <select ...> das Attribut size den Wert 1 hat (Standardwert) und das Attribut multiple nicht gesetzt ist. Hat size einen Wert größer als 1 und ist das Attribut multiple gesetzt, so besitzt die Eigenschaft type den Wert select-multiple.
Schwieriger ist die Bestimmung des Typs, wenn size einen Wert größer als 1 hat, aber multiple nicht gesetzt ist. In diesem Fall liefern die unterschiedlichen Browser keinen sicheren Typ. Bei den einen ist der Typ select-one, weil multiple nicht gesetzt ist, und bei den anderen select-multiple, weil mehr als ein Eintrag gleichzeitig sichtbar ist.
Der zu diesem Event-Handler gehörige JavaScript-Quelltext wird ausgeführt, wenn die Auswahlliste den Eingabefokus verliert und vorher die Auswahl geändert wurde.
Für jeden Eintrag in einer Auswahlliste wird ein Objekt vom Typ Option angelegt. Jedes dieser Objekte hat seine eigenen Eigenschaften und Methoden. Das Besondere an den Objekten vom Typ Option ist, dass man Auswahllisten verändern kann, auch wenn die HTML-Seite bereits vollständig geladen ist. Zu diesen dynamischen Änderungsmöglichkeiten zählen so einfache Dinge wie das Verändern der Werte zu den Optionen und das Ändern der Texte zu den Optionen ebenso wie Veränderungen der kompletten Liste. Es lassen sich also sogar Einträge löschen oder hinzufügen.
Dreh- und Angelpunkt für Veränderungen der Liste ist einerseits das Array options des Select-Objekts und andererseits der Konstruktor der Objekte des Typs Option. Ein Beispiel für den Einsatz:
Für das Erweitern der Auswahlliste wird ein neues Objekt angelegt.
meinObjekt = new Option("Neuer Text", "Der Wert dazu.")
Hierbei heißt übrigens die Nutzung des Objekttyps Option als Funktion Konstruktor. Dieser neue Eintrag oder besser diese neue Option wird einfach an das Array mit den bereits bestehenden Optionen angehängt:
var pos = document.forms["meinFormular"]["meine Liste"].options.length document.forms["meinFormular"]["meine Liste"].options[pos] = meinObjekt
Die JavaScript-Referenz zur JavaScript-Version 1.3 von Netscape empfiehlt zudem, die Seite mit history.go(0) neu aufzubauen, was sich allerdings in der Praxis als unnötig erweist.
Das Löschen bzw. Entfernen eines Eintrags erfolgt dadurch, dass der entsprechende Eintrag im options-Array auf null gesetzt wird:
document.forms["meinFormular"]["meine Liste"].options[i] = null
Der Konstruktor für Objekte des Typs Option gestattet vier Parameter, wobei keiner zwingend erforderlich ist:
new Option([Text [, Wert [, Standardwahl [, selektiert]]]])
Die Parameter im Einzelnen:
| Parameter | Beschreibung |
|---|---|
| Text | Text, der in der Auswahlliste angezeigt werden soll. |
| Wert | Wert, der übermittelt werden soll, wenn das Formular abgeschickt wird. |
| Standardwahl | Legt fest, ob der Eintrag bei der Initialisierung des Formulars selektiert werden soll oder nicht. (Entsprechend wird der Wert true bzw. false übergeben.) Der Parameter entspricht der Eigenschaft defaultSelected. |
| selektiert | Bestimmt, ob der Eintrag aktuell selektiert werden soll oder nicht. (Hier ebenso mit den Werten true oder false.) Der Parameter entspricht der Eigenschaft selected. |
Tabelle 5.7: Parameter des Konstruktors Option
Beispiele für die Verwendung des Konstruktors.
farbeBlau = new Option("Blau", "4711")
dieAntwort = new Option("Universalantwort", "42", false, true)
Bestimmt die Länge des Arrays options und ist damit identisch mit dem Attribut length des übergeordneten Select-Objekts.
Die Eigenschaft selectedIndex des Objekts Select liefert insbesondere bei Auswahllisten mit der Möglichkeit, mehr als einen Eintrag auszuwählen, nur unbefriedigende Ergebnisse, da nur der erste selektierte Eintrag erkannt werden kann. Jeder Eintrag hat - über den Objekttyp Option - die Eigenschaft, ob der Eintrag gewählt ist oder nicht. Untersucht man das gesamte Array options, kann so ermittelt werden, welche Einträge selektiert wurden und welche nicht.
function ermittleAnzahlGewaehlterEintraege(optionen)
{
var i
var anzahl = 0
for(i = 0; i < optionen.length; i++)
if(optionen[i].selected)
anzahl++
return anzahl
}
Der in der Auswahlliste angezeigte Text kann über die Eigenschaft text abgefragt und seit JavaScript 1.1 auch verändert werden. Die Nutzung ist somit durchaus einfach. Zum Beispiel kann so der erste Eintrag in der Liste dynamisch mit dem aktuell gefüllten Wert belegt werden.
with(document.meinFormular.meineListe) options[0].text = options[selectedIndex].text
Analog zur Eigenschaft text kann mit Hilfe der Eigenschaft value der Wert eines Eintrags verändert werden.
with(document.meinFormular.meineListe) options[0].value = options[selectedIndex].value
Button Submit
Die zentrale Methode für Formulare ist über den Button Submit erreichbar: das Absenden der Formulardaten. Sie ist immer dann wichtig, wenn wirklich Daten weitergereicht werden und nicht nur innerhalb eines Dokuments Berechnungen oder andere Aufgaben durchgeführt werden, die Eingaben erfordern.
Die Kürze der Beschreibung soll nicht über die Wichtigkeit dieses Objekttyps hinwegtäuschen. Der Objekttyp tritt auch selten direkt auf, meistens nur als Button im Formular. Bemerkt wird die Funktion eher, wenn der zum HTML-Element <form ...>...</form> gehörige Event-Handler onSubmit aktiviert wird. Ein Klick auf den Button bewirkt immer den Aufruf einer neuen Seite - es sei denn, dass bei dem Event-Handler onSubmit der Wert false zurückgegeben wird. Der Aufruf der neuen Seite kann auch die aktuelle Seite selbst sein, sei es, dass dies so bei dem Attribut action des HTML-Elements <form ...>...</form> spezifiziert wurde, sei es, dass dort schlicht gar nichts spezifiziert wurde.
Abbildung 5.7: Muster Formularelement Submit
leicht
Schreiben Sie ein HTML-Dokument mit einem Formular, welches zwei Textfelder und einen Submit-Button enthält. Implementieren Sie Event-Handler für die beiden Textfelder, die überprüfen, dass diese vor dem Versand des Formulars gefüllt worden sind.
Suchen Sie durchaus nach mehreren Lösungsansätzen.
leicht
Wägen Sie die Vor- und Nachteile der in der ersten Übung gefundenen Lösungsansätze ab.
leicht
Schreiben Sie eine Funktion, die überprüft, ob ein String eine numerische Angabe enthält.
leicht
Nutzen Sie das in der ersten Übung vorgestellte Formular, um eine Funktion zu implementieren, die gewährleistet, dass die Eingaben in das erste Feld numerisch sind. Das zweite Eingabefeld kann weggelassen werden.
leicht
Schreiben Sie ein HTML-Dokument, welches ein Formular mit drei Textfeldern enthält. In den ersten beiden Textfeldern sind ausschließlich numerische Eingaben gestattet. Das dritte Textfeld soll immer dann gefüllt werden, wenn der Inhalt eines der beiden ersten Textfelder verändert wird. Es soll die Summe der Werte der beiden ersten Felder enthalten.
mittel
Schreiben Sie ein HTML-Dokument mit drei in einer Gruppe zusammengefassten Radioknöpfen und einem Textfeld, wobei das Textfeld immer den Wert des gewählten Radioknopfs anzeigt.
leicht
Schreiben Sie ein HTML-Dokument mit einem Formular, bei dem der Submit-Button durch einen Link ersetzt wird.
leicht
Schreiben Sie ein HTML-Dokument mit einem Formular, welches eine Auswahlliste (mit nur einem wählbaren Eintrag) und zwei Textfelder enthält. In dem ersten Textfeld soll der Index des gewählten Eintrags aus der Auswahlliste und in dem zweiten Textfeld der dazugehörige Wert angezeigt werden.
schwer
Schreiben Sie ein HTML-Dokument mit einem Formular, welches eine Auswahlliste und zwei Textfelder (Textarea) enthält. In der Auswahlliste können beliebige Einträge voreingetragen werden (und auch selektiert werden), die beiden Textfelder enthalten keine Einträge. Mit jeder Änderung der Auswahl in der Auswahlliste werden die beiden Textfelder angepasst. Sie enthalten jeweils die Indizes und die Werte der gewählten Einträge aus der ersten Auswahlliste.
schwer
Schreiben Sie ein HTML-Dokument mit einem Formular, welches u.a. eine Auswahlliste enthält, bei der nur ein Eintrag wählbar ist. Ferner soll mit dem Formular das Löschen und Ergänzen von Einträgen möglich sein sowie das Verändern von den angezeigten Texten und den dazugehörigen Werten. Das Löschen eines Eintrags und die Anzeige von Text und Wert beziehen sich jeweils auf den aktuell gewählten Eintrag in der Auswahlliste.
mittel
Schreiben Sie ein HTML-Dokument mit einem Formular, welches eine Auswahlliste enthält. Sobald die Auswahl verändert wird, soll eine JavaScript-Funktion ausgeführt werden. (Dies entspricht einer einfachen Menüsteuerung.)
mittel
Schreiben Sie ein HTML-Dokument mit einem Textfeld, welches beim Aufruf der Seite mit dem aktuellen Datum gefüllt wird.
Drei sinnvolle Möglichkeiten bieten sich für die Lösung an: Verwendung des Event-Handlers onSubmit bei dem Start-Tag <form ...>, Verwendung des Event-Handlers onChange oder onBlur bei dem Tag <input type="text" ...>.
Lösungsansatz mit onSubmit
Wenn der Event-Handler onSubmit genutzt wird, benötigt man eine Funktion, die true bzw. false zurückgibt. Der Funktion wird üblicherweise als Parameter das Formular-Objekt übergeben.
function pruefung(formular)
{
if(...)
{
...
return false
}
return true
}
Die beiden Textfelder werden in der Funktion überprüft, beispielsweise so: formular.meinFeld1.value == "". Ist diese Bedingung erfüllt (oder analog die für meinFeld2), so wird eine Fehlermeldung ausgegeben sowie der Wert false zurückgegeben. Ein netter Service ist außerdem, den Eingabecursor auf dem bemängelten Feld zu platzieren.
// Pruefung des Formulars
function pruefung(formular)
{
// Wert in Textfeld eingetragen?
if((formular.meinFeld1.value == "") ||
(formular.meinFeld2.value == ""))
{
// Fehlermeldung
alert("Bitte einen Wert in jedes Textfeld eintragen.")
// Eingabefokus auf das Feld setzen
formular[(formular.meinFeld1.value == "") ?
"meinFeld1" : "meinFeld2"].focus()
// Formular nicht weiter pruefen
return false
}
// Eingaben OK!
return true
}
Die Funktion allein ist nicht ausreichend, sie muss auch aufgerufen werden. Der Event-Handler mit dem JavaScript-Quelltext onSubmit="return pruefung(this)" wird hierzu einfach bei dem HTML-Start-Tag <form ...> ergänzt.
<form ... onSubmit="return pruefung(this)">
Den Quelltext der Lösung finden Sie auf der CD unter \kapitel05\uebungen\uebung0501a.html.
Lösungsansatz mit onBlur
Der zweite Lösungsansatz führt zu dem Event-Handler onBlur, den man bei dem HTML-Element <input type="text" ... onBlur="..."> ergänzt. Mit diesem Event-Handler ist eine Überprüfung des Textfelds direkt nach dem Verlassen des Felds möglich. Da dieser Handler bereits anspricht, wenn ein Feld den Eingabefokus verliert, muss man sich mehr Gedanken machen. Der springende Punkt ist, dass der Eingabefokus verloren wird, wenn ein anderes Fenster aktiviert wird. Zu diesem Zeitpunkt ist eine Kontrolle des Feldinhalts eher unerwünscht.
Als zweites Problem ergibt sich, dass der Eingabecursor auf jeden Fall in einem der Textfelder platziert werden muss. Denn wenn sich dieser direkt auf dem Submit-Button befindet, erhalten die Textfelder nie den Eingabefokus und verlieren ihn somit auch nicht - eine Überprüfung würde in diesem Fall unterbleiben.
Und noch ein drittes Problem ergibt sich, wenn sich zwei Textfelder - wie in unserem Fall - nacheinander in einem Formular befinden. Gibt man in das erste Feld nichts ein und platziert den Cursor auf das zweite Feld, so kommt es zu einer Überprüfung des ersten Felds und somit zu einer entsprechenden Meldung. Wird mit Hilfe der Methode focus der Cursor automatisch im fehlerhaften Feld platziert, so wird auch das zweite Feld gleich nach dem Betreten wieder verlassen. Sind dort keine Angaben enthalten und die gleiche Überprüfungsroutine wird aktiviert, so erscheint auch für dieses eine Fehlermeldung. So geht es dann weiter und man befindet sich in einer Endlosschleife.
Eine Überprüfung könnte so aussehen:
var prueffeld = ""
// Pruefung eines Textfelds
function pruefe(feld)
{
if((prueffeld != feld.name) && (prueffeld != ""))
return
// Wert in Textfeld eingetragen?
if(feld.value != "")
{
prueffeld = ""
return
}
// Zu pruefendes Feld merken
prueffeld = feld.name
// Fehlermeldung
alert("Bitte einen Wert in das Textfeld '" + feld.name +
"' eintragen.")
// Eingabefokus auf das Feld setzen
feld.focus()
}
Die Variable prueffeld wird genutzt, um sich zu merken, welches Feld gerade geprüft wird. So wird die Endlosschleife vermieden.
Nach dem Laden des Dokuments wird der Cursor gleich im richtigen Feld positioniert:
<body ... onLoad="document.meinFormular.meinFeld1.focus()">
Das Problem mit der Überprüfung des Felds, wenn das Fenster selbst oder ein Element in dem Fenster den Eingabefokus verliert, kann nicht so einfach gelöst werden. Eine Ansatzmöglichkeit wäre, auch zu prüfen, ob das Fenster den Eingabefokus verliert, aber die Synchronisation mit dem Formularelement ist nicht trivial. Ergo verzichten wir darauf.
Zuletzt ist der Aufruf der Prüfroutine erforderlich, die bei dem HTML-Element <input ...> ergänzt wird:
<input type="text" ... onBlur="pruefe(this)">
Mit dem Bezeichner this wird das Text-Objekt übergeben, in dem sich der Event-Handler befindet.
Den Quelltext der Lösung finden Sie auf der CD unter \kapitel05\uebungen\uebung0501b.html.
Lösungsansatz mit onChange
Der dritte Lösungsansatz führt über den Event-Handler onChange, der aktiviert wird, wenn sich der Feldinhalt ändert. Dies erscheint als recht praktischer Weg, hat aber auch seine Probleme. Der Event-Handler wird nicht aktiviert, wenn ein Feld bereits leer ist. So muss das entsprechende Feld mit einem Text vorbelegt werden. Und um es ganz genau zu nehmen, muss vor dem Versenden des Formulars geprüft werden, ob die Vorbelegung verändert wurde. Der beste Weg führt bei den einfachen Textfeldern über einen Vergleich der Eigenschaften value und defaultValue. In diesem Lösungsansatz wird allerdings darauf verzichtet.
Die Prüffunktion ist mit der aus dem vorigen Lösungsansatz vergleichbar:
// Pruefung eines Textfelds
function pruefe(feld)
{
// Wert in Textfeld eingetragen?
if(feld.value != "")
return
// Fehlermeldung
alert("Bitte einen Wert in das Textfeld '" + feld.name +
"' eintragen.")
// Eingabefokus auf das Feld setzen
feld.focus()
}
Auch die Einbindung bei dem HTML-Element <input ...> ist ähnlich. Das Attribut value ist bei dem HTML-Element mit Wert auf jeden Fall anzugeben, damit der Event-Handler onChange passend aktiviert wird. Ein zusätzlicher Service, der hier integriert wurde (und die Eingabe eines neuen Werts erleichtern soll), ist der Event-Handler onFocus, der mit dem Aufruf this.select() den Feldinhalt schon beim Betreten des Felds markiert.
<input type="text" ... value="Bitte auch dieses Feld füllen!"
onChange="pruefe(this)" onFocus="this.select()">
Den Quelltext der Lösung finden Sie auf der CD unter \kapitel05\uebungen\uebung0501c.html.
Die Vor- und Nachteile der Lösungsansätze aus der Übung 1 ergeben sich bereits aus den vorgestellten Lösungen:
Die Vor- und Nachteile sind jeweils in der folgenden Tabelle stichpunktartig zusammengefasst:
| Vorteile | Nachteile |
|
|
| Vorteile | Nachteile |
|
|
| Vorteile | Nachteile |
|
|
Kern der Lösung ist die Abfrage, ob eine Zahl numerisch ist. JavaScript kennt die Funktionen parseFloat und parseInt, die implizit auch eine Analyse der jeweils übergebenen Zeichenkette vornimmt. Ist sie nicht numerisch, so kann dies mit der Funktion isNaN geprüft werden. Der Weg ist also, den Wert eines Textfelds mit der Funktion parseFloat oder parseInt (je nachdem, ob Dezimalzahlen gestattet sind oder nicht) umzuwandeln. Ist keine Zahl übergeben worden, so wird ein Fehler gemeldet.
Da die Zeichenkette mit der Zahl nicht unbedingt übereinstimmt, sollte man anschließend den Wert, den die Funktion parseFloat oder parseInt ermittelt hat, wieder in das Textfeld setzen.
Übrigens: Ein Dezimalkomma wird so nicht erkannt. Wer auch dieses erkennen will, muss in der Zeichenkette vor der Prüfung ein Komma durch einen Punkt ersetzen und vor dem Wiedereinsetzen in das Textfeld den Punkt wieder in ein Komma umwandeln.
Wenn Sie eine noch flexiblere Funktionalität haben möchten, so können Sie statt mit parseFloat oder parseInt auch mit regulären Ausdrücken arbeiten. Ein Beispiel für eine Prüffunktion mit regulären Ausdrücken:
var regExpZahl = /^((\d+(,\d*)?)|((\d*,)?\d+))$/
function istZahl(s)
{
return regExpZahl.test(s)
}
Reguläre Ausdrücke können allerdings erst ab JavaScript 1.2 genutzt werden - und dann auch nur, wenn der Browser den Sprachumfang soweit integriert hat, dass reguläre Ausdrücke dazugehören.
Ein zusätzlicher Service der Prüffunktion ist das Setzen des Eingabecursors auf das Feld mit der fehlerhaften Eingabe sowie ein automatisches Markieren der vorhandenen Eingabe.
// Pruefung, ob Feld numerisch
function numerisch(feld)
{
if(feld.value == "")
return
// Feld analysieren
var test = parseFloat(feld.value)
// OK? Dann zurueck!
if(!isNaN(test))
{
// Ergebnis darstellen
feld.value = test
return
}
// Fehlermeldung
alert("Bitte nur numerische Angaben!")
// Eingabe selektieren und Eingabefokus setzen
feld.select()
feld.focus()
}
Die Funktion zur Überprüfung, ob eine Eingabe numerisch ist, wurde bereits in der vorigen Lösung vorgestellt. In dem Formular ist nun noch der passende Event-Handler einzubinden. Um den Wert direkt nach der Eingabe zu prüfen, wählen wir den Event-Handler onChange. Er wird nach jeder Veränderung aktiviert und kann so bei Veränderungen im Textfeld diese sofort danach prüfen.
<input type="text" ... onChange="numerisch(this)">
Den Quelltext der Lösung finden Sie auf der CD unter \kapitel05\uebungen\uebung0504.html.
Da mit numerischen Werten gearbeitet wird, bietet sich die Verwendung der bereits in den vorigen Übungen genutzten Funktion zur Überprüfung an. Eine zusätzliche Funktion entsteht durch die Berechnung, die in den ersten beiden Feldern aktiviert wird. Die beiden Eingabefelder heißen meinFeld1 und meinFeld2, das Ausgabefeld meinFeld3. Die beiden Zahlen werden nur dann addiert, wenn sie auch wirklich numerisch sind.
// Berechnungsfunktion
function rechne(feld)
{
with(feld.form)
{
var wert1 = parseFloat(meinFeld1.value)
var wert2 = parseFloat(meinFeld2.value)
// Werte in Feld1 und Feld2 numerisch?
if(isNaN(wert1) || isNaN(wert2))
return
// Ergebnis berechnen, wenn beide Felder gefuellt sind
meinFeld3.value = (meinFeld1.value == "" ||
meinFeld2.value == "") ?
"" :
wert1 + wert2
}
}
In den beiden Eingabefeldern wird erst die Prüfung vorgenommen, ob die Inhalte numerisch sind, und dann die Berechnung. Damit erfolgt die Prüfung zwar genau genommen doppelt, aber die bereits fertige Funktion numerisch kann genutzt werden.
<input type="text" name="meinFeld1"
onChange="numerisch(this); rechne(this)">
<input type="text" name="meinFeld2"
onChange="numerisch(this); rechne(this)">
Das Ausgabefeld benötigt keinen Event-Handler. Es dient wirklich nur der Ausgabe.
<input type="text" name="meinFeld3" readonly>
Den Quelltext der Lösung finden Sie auf der CD unter \kapitel05\uebungen\uebung0505.html.
Im Vergleich zur Checkbox wird der Wert eines Radioknopfs ähnlich abgefragt - nur wird die Eigenschaft value statt checked verwendet.
// Anzeige des Werts des Radioknopfs
function angeklickt(rknopf)
{
rknopf.form.meineAnzeige.value = rknopf.value
}
Radioknöpfe treten immer in Gruppen auf. Da aber eigentlich nicht der Wert des Radioknopfs gemeint ist, sondern der der Gruppe, ist der Event-Handler, der die Veränderung in der Gruppe registriert, bei jedem Radioknopf zu ergänzen. Passend ist onClick, denn dieser wird aktiviert, wenn ein Radioknopf angeklickt wird.
<input type="radio" name="meinRadioknopf" value="opt1" checked
onClick="angeklickt(this)">
<input type="radio" name="meinRadioknopf" value="opt2"
onClick="angeklickt(this)">
<input type="radio" name="meinRadioknopf" value="opt3"
onClick="angeklickt(this)">
Das Ausgabefeld ist wie in der vorangegangenen Lösung nur ein reines Textfeld ohne JavaScript.
Den Quelltext der Lösung finden Sie auf der CD unter \kapitel05\uebungen\uebung0506.html.
Ein Link, der den Submit-Button ersetzt, kann zum Beispiel so aussehen:
<a href="javascript:document.meinFormular.submit()">Absenden</a>.
Da kein direkter Bezug zum Formular besteht, muss dieses vollständig qualifiziert werden. In unserem Fall heißt das Formular meinFormular.
Den Quelltext der Lösung finden Sie auf der CD unter \kapitel05\uebungen\uebung0507.html.
Der Index des gewählten Eintrags in der Auswahlliste wird mit der Eigenschaft selectedIndex festgestellt. Mit diesem Index kann auch aus dem Array der Einträge der Wert ermittelt werden.
// Anzeige des Werts der Auswahlliste
function wechsel(sfeld)
{
sfeld.form.anzeigeIndex.value = sfeld.selectedIndex
sfeld.form.anzeigeWert.value = sfeld[sfeld.selectedIndex].value
}
Die Anzeige der beiden Werte "Index" und "Wert" erfolgt immer nach Wahl eines Eintrags. Daher muss in der Funktion auch nicht geprüft werden, ob die Eigenschaft selectedIndex den Wert -1 - also kein Eintrag gewählt - beinhaltet. Der geeignete Event-Handler, um die Ausgabe zu initiieren, ist onChange. Er wird bei dem HTML-Element <select ...> ergänzt.
<select size="5" onChange="wechsel(this)"> <option value="ausw1">Auswahl 1 <option value="ausw2">Auswahl 2 <option value="ausw3">Auswahl 3 ... </select>
Die beiden Textfelder dienen nur der Ausgabe. Ihre Namen werden in der vorgestellten Funktion wechsel genutzt.
<input type="text" name="anzeigeIndex" readonly size="5"> <input type="text" name="anzeigeWert" readonly size="5">
Den Quelltext der Lösung finden Sie auf der CD unter \kapitel05\uebungen\uebung0508.html.
Die Lösung dieser Übung entscheidet sich lediglich in dem kleinen Attribut multiple, welches bei dem HTML-Element <select ...> zusätzlich aufgeführt ist.
<select size="5" multiple onChange="wechsel(this)">
Die Funktion wechsel ist in der Folge ebenso abzuwandeln, da nicht mehr nur ein Eintrag gewählt werden kann. Die gesamte Liste der Optionen wird untersucht. Jedesmal, wenn die Eigenschaft selected den Wert true hat, wird der Index und der Wert zu einer Zeichenkette hinzugefügt, die am Ende der Funktion in den jeweiligen Textarea-Objekten angezeigt wird. Die einzelnen Werte werden durch Zeilenumbrüche voneinander getrennt, damit jeder für sich in einer Zeile des Textarea-Objekts erscheint.
// Anzeige des Werts der Auswahlliste
function wechsel(sfeld)
{
var sel_indizes = ""
var sel_werte = ""
var i
// Alle Eintraege untersuchen
for(i = 0; i < sfeld.length; i++)
{
if(sfeld[i].selected)
{
sel_indizes += ((i == sfeld.selectedIndex) ? "" : "\n") + i
sel_werte += ((i == sfeld.selectedIndex) ? "" : "\n") +
sfeld[i].value
}
}
// Werte eintragen
sfeld.form.anzeigeIndex.value = sel_indizes
sfeld.form.anzeigeWert.value = sel_werte
}
Als Beispiel für die Definition eines Textarea-Objekts sei hier einmal das für die Anzeige der Indizes genannt:
<textarea cols="5" rows="5" wrap="soft" name="anzeigeIndex"
readonly></textarea>
Den Quelltext der Lösung finden Sie auf der CD unter \kapitel05\uebungen\uebung0509.html.
Diese Übung fragt nach mehreren Funktionen, die im Einzelnen vorgestellt werden. Die Auswahlliste hat bei allen Funktionen den Namen Auswahl.
Die Funktionen werden jeweils über einen Button aktiviert, der die jeweilige Funktion aufruft. Ein Beispiel für einen derartigen Button:
<input type="button" value="Lösche gewählten Eintrag"
onClick="loesche_eintrag(this.form)">.
Den Quelltext der Lösung finden Sie auf der CD unter \kapitel05\uebungen\uebung0510.html.
Eintrag löschen
Ein Eintrag aus einer Liste wird gelöscht, indem ihm einfach der Wert null zugewiesen wird. Die Funktion löscht den aktuell gewählten Eintrag, erkennbar an der Nutzung der Eigenschaft selectedIndex.
// Eintrag in Liste loeschen
function loesche_eintrag(formular)
{
// Eintrag gewaehlt?
if(formular.Auswahl.selectedIndex == -1)
{
alert("Kein Eintrag gew\xE4hlt!")
return
}
formular.Auswahl.options[formular.Auswahl.selectedIndex] = null
}
Eintrag hinzufügen
Um einen Eintrag zu ergänzen, muss ein neues Objekt vom Typ Option angelegt werden. Ihm werden als Parameter der Text und der Wert (hier als Werte zweier Textfelder) übergeben. Das so entstandene Objekt wird an das Ende (oder bei Umordnung an jede andere Stelle) des Arrays options angehängt.
// Eintrag ergaenzen
function ergaenze_eintrag(formular)
{
var neue_option = new Option(formular.ergaenze_eintrag_text.value,
formular.ergaenze_eintrag_wert.value)
formular.Auswahl.options[formular.Auswahl.options.length] =
neue_option
}
Text ändern
Der Text des Eintrags wird durch Zuweisen eines neuen Werts an die Eigenschaft text der gewünschten Option erreicht. Der neue Wert stammt hier aus einem Textfeld.
// Text des gewaehlten Eintrags aendern
function aendere_text(formular)
{
if(formular.Auswahl.selectedIndex < 0)
{
alert("Kein Eintrag gew\xE4hlt!")
return
}
formular.Auswahl.options[formular.Auswahl.selectedIndex].text =
formular.aendere_eintrag_text.value
}
Wert ändern
Die Funktion ist nahezu identisch zur Änderung des Texts, nur wird hier die Eigenschaft value genutzt.
// Wert des gewaehlten Eintrags aendern
function aendere_wert(formular)
{
if(formular.Auswahl.selectedIndex < 0)
{
alert("Kein Eintrag gew\xE4hlt!")
return
}
formular.Auswahl.options[formular.Auswahl.selectedIndex].value =
formular.aendere_eintrag_wert.value
}
Für die Lösung dieser Übung ist ein Skript, wie es bei den anderen Lösungen vorgestellt wurde, gar nicht notwendig. Der JavaScript-Quelltext wird direkt bei dem Event-Handler des Select-Objekts eingebunden, welches auch das Menü darstellt.
Der relevante JavaScript-Quelltext nutzt this stellvertretend für das Select-Objekt:
if(this.selectedIndex > 0) eval(this.options[this.selectedIndex].value)
Der erste Eintrag (Nummer 0) dient nur der Darstellung eines Aufforderungstexts und wird für die Interpretation übersprungen. Die JavaScript-Funktion eval übernimmt die Interpretation des JavaScript-Quelltexts, der bei den einzelnen Optionen aufgeführt ist.
<select onChange="if(this.selectedIndex > 0)
eval(this.options[this.selectedIndex].value)">
<option selected>--- Bitte auswählen ---
<option value="alert('Hallo Welt!')">Gruß
<option value="window.open(location.href)">Neues Fenster
</select>
Den Quelltext der Lösung finden Sie auf der CD unter \kapitel05\uebungen\uebung0511.html.
Grundsätzlich ist die Gestaltung einer Funktion, die Felder eines Formulars belegt, kein Problem. Die Beispielfunktion zeigt dies mit einem Textfeld, welches mit dem aktuellen Datum gefüllt wird.
// Vorbelegung
function vorbelegung(formular_name)
{
var formular = document.forms[formular_name]
var heute = new Date()
formular.meinFeld.value = heute.toLocaleString()
}
Die wichtigste Frage ist allerdings, wann bzw. wie diese Funktion aufgerufen wird. Man kann zum Beispiel am Ende des Dokuments die Funktion direkt aufrufen. Das ist zwar prinzipiell richtig, aber nicht ideal. Der geeignete Zeitpunkt ist der Event-Handler onLoad des HTML-Start-Tags <body ...>. Er wird aktiviert, wenn das gesamte Dokument geladen ist. (Die Bilder zählen hier nicht mit, aber das ist für ein Formular auch gar nicht relevant.)
<body onLoad="vorbelegung('meinFormular')">
Das Formular in unserem Beispiel hat den Namen meinFormular.
Den Quelltext der Lösung finden Sie auf der CD unter \kapitel05\uebungen\uebung0512.html.
Optimiert für HTML- & CSS-Browser.
Bestes Ergebnis mit Mozilla und Opera.JavaScript basiert auf W3C-DOM.
Wir unterstützen Standards!
Copyright 2000-2004 Christine Kühnel & Stefan Mintert. Alle Rechte vorbehalten. Online-Fassung: Christine Kühnel http://screenexa.net/
