Werbung einblenden Werbung ausblenden


Home / Tutorials / JavaScript Handbuch / Zugriff auf Formularelemente


Ansteuern von Formularelemente
radio button
checkbox
select box
Menü und Untermenü in einer select box

Ansteuern von Formularelemente

Im Gegensatz zu anderen, serverseitig arbeitenden Programmiersprachen wie Perl, PHP, VBS (ASP) etc. die Eingaben des Users über einen QUERY_STRING erhalten, kann in JavaScript auf die Formularelemente über einen objektorientierten Ansatz zugegriffen werden. Das Verfahren ist also 1) völlig anders, als bei serverseitig arbeitenden Programmiersprachen und b) wesentlich komplizierter. Der prinzipielle Aufbau von HTML Formularen wurde schon sehr oft in diesen Handbüchers beschrieben, zum Beispiel in Formulare. Will man mit JavaScript auf Formularelemente zugreifen, so will man sie in der Regel, völlig anders als bei serverseitig arbeitenden Programmiersprachen, die Eingaben des Users in der Regel nicht an den Server übertragen, obwohl dies über Umwege natürlich möglich ist. Im Zusammenhang mit JavaScript versucht man in der Regel die Menüführung einer Site zu optimieren. Hat man zum Beispiel sehr viele Menüpunkte, kann man diese in einer select box aufblenden. Der User kann dann den entsprechenden Menüpunkt auswählen und wird auf die entsprechende Seite weitergeleitet. Das ist dann kompakter, als das Aufblenden der einzelnen Hyperlinks. Denkbar ist aber auch, dass man z.B. ein Quiz oder ein Spiel hat, das rein clientseitig läuft und man die Werte, die der User eingibt abfangen will, um sie dann in einem Array zu parken. Genauso gut möglich ist aber, dass mehrere Themen hat zu welchen wieder mehrere Unterthemen gehören. Man könnte die Menüführung dann so gestalten, dass der User zuerst ein Thema wählt und in eine andere select Box die Unterthemen aufgeblendet werden. Das wäre dann eine sehr kompakte Menüführung, die es erlaubt, schnell durch einen komplexen Themenbaum zu navigieren. Wie gesagt, ist das Ansteuern der einzelnen Formularelemente in JavaScript kompliziert, insbesondere ist es anders für jedes Formularelement. Wir zeigen anhand des folgenden Beispiels, wie die einzelnen Formularelemente angesteuert werden können.

<script language="JavaScript">
function zeigen()
{
test_wert=document.spiel.FNAME.value;
hobby_wert=document.spiel.hobby[document.spiel.hobby.selectedIndex].value;
geschlecht1_wert=document.spiel.geschlecht[0].checked;
geschlecht2_wert=document.spiel.geschlecht[1].checked;
inhalt=document.spiel.Inhalt.value;

if(document.spiel.geschlecht[0].checked)
{
geschlecht=document.spiel.geschlecht[0].value;
}
if(document.spiel.geschlecht[1].checked)
{
geschlecht=document.spiel.geschlecht[1].value;
}

boxen=new Array;
for(i=0;i<=3;i++)
{
if(document.spiel.abschluss[i].checked)
{
boxen.push(document.spiel.abschluss[i].value);
}
}
abschluss=boxen.join(" ");
alert("Hallo "+test_wert+"\nDein Hobby ist also "+hobby_wert+". Du bist "+geschlecht+
".\nDamit Du nicht vergisst, wass du eingegeben hast:\n"+inhalt+"\n Du hast dir folgende Titel erworben:\n"+
abschluss);
}
</script>
</head>
<body>
<form name=spiel>
<input type=hidden name=test value="ist nur ein Test">
<table>
<tr><td>Name </td><td><input type=text name=FNAME></td></tr>
<tr><td>Hobby</td><td><select name=hobby><option value="schwimmen">schwimmen<option value="lesen">lesen<option value="Rad fahren">Rad fahren</select></td></tr>
<tr><td>Geschlecht</td><td>m <input type=radio name=geschlecht value="männlich" checked> w <input type=radio name=geschlecht value="weiblich"></td></tr>
<tr><td colspan=2 align=middle><textarea rows=5 cols=40 name=Inhalt></textarea></td></tr>
<tr><td>berufliche Abschlüsse</td><td>Abitur <input type=checkbox name=abschluss value="Abitur"> Diplom <input type=checkbox name=abschluss value="Diplom"> Magister <input type=checkbox name=abschluss value="Magister"> Ingenieur <input type=checkbox name=abschluss value="Ingenieur"></td></tr>
<tr><td colspan=2 align=middle><input type=button value="zeigen" onClick=zeigen()></td></tr>
</table>
</form></body>

Schauen wir uns das Formular hier an.

Das Beispiel zeigt, wie man in JavaScript die Werte, die in ein Formular eingegeben wurden, wieder auslesen kann. Einfach mal ein paar Werte eingeben und auf zeigen clicken. Was das kleine Programm macht, ist eigentlich selbserklärend. Wir sehen aber, dass das Auslesen der Werte durchaus nicht trivial ist und auch nicht für alle Formularelemente gleich. Fangen wir mit den trivialen Fällen an. Die Werte aus einer Text Box, einem versteckten Feld oder aus einem Textfeld auslesen ist einfach. Wir geben lediglich den Pfad zu diesem Feld an und zu guter letzt, was wir von diesem Feld sehen wollen, den Wert oder den Namen, wobei man sich wohl meistens für den Namen interessiert. Das geht dann nach dem Schema document.Name_des_Formulars.Name_des_Formularelementes.value_oder_name. Diesen Wert übergeben wir dann an eine Variable und das war es dann auch schon. Der radio button, die select box und die checkbox allerdings bereiten uns Probleme, hier ist das nicht mehr so einfach. Schauen wir uns das im Detail an.

radio button

Wir wollen den Wert haben, den der User tatsächlich angeclickt hat, der also checked ist, folglich müssen wir erstmal abtesten, welcher Wert überhaupt checked ist. Die Zeile
document.spiel.geschlecht[0].checked
sagt uns das. Ist der Wert checked für den ersten radio button, erhalten wir true, wenn nicht false. Alle radio buttons zusammen bilden hierbei einen Array. Wäre der Fall komplizierter, hätten wir eine beliebig grosse Anzahl an radio buttons, müssten wir, wie wir es auch mit den Checkboxen machen, alle Elemente des Arrays in einer for Schleife auslesen. Bei den radio buttons, die uns als Ergebnis true liefern, interessieren wir uns auch für den eigentlichen Wert, den wir mit
document.spiel.geschlecht[0].value
auslesen.

checkbox

Das Verfahren bei der checkbox ist ähnlich, allerdings ist es hier noch etwas komplizierter, da wir 1) mehrere davon haben und 2) unter Umständen auch mehrere Werte erhalten können, wenn jemand mehr als einen beruflichen Abschluss hat. Auf alle Checkboxen kann wieder mit einem Array zugegriffen werden. Wir lesen in einer for Schleife alle Werte aus. Wieder erhalten wir für
document.spiel.abschluss[1].checked
den Wert true, wenn diese Box angeclickt wurde und den Wert false, wenn diese nicht angeclickt wurde. Bei den Boxen, die true sind, interessiert uns wieder der Wert, den wir mit
document.spiel.abschluss[i].value
abfangen. Das reicht uns aber noch nicht, da, wie bereits erwähnt, jemand ja auch mehrere berufliche Abschlüsse haben kann. Wir lesen also die Werte anschliessend noch in einen Array aus dem wir dann später via join wieder eine Zeichenkette machen.

select box

Die select box tanzt nun endgültig aus der Reihe. Auch hier haben wir es wieder mit einem Array zu tun. Um festzustellen, welche Option angewählt wurde, schreiben wir
document.spiel.hobby[selectedIndex]
was uns die Position der angewählten Option innerhalb des Array hobby angibt, in unserem Fall kann das eine Zahl zwischen 0 und 2 sein. Wenn wir wissen, welches Element angewählt wurde, können wir auch den dazugehörigen Wert ermitteln, das ist es ja, was wir haben wollen. Wenn wir also
document.spiel.hobby[document.spiel.hobby.selectedIndex].value
schreiben, haben wir den Wert, der angewählten Option. Nachdem wir nun alle Elemente des Formulars rausgefischt haben, können wir diese in einem alert Fenster anzeigen. Es sind kompliziertere Verhältnisse denkbar, aber sie lassensich alle nach einem Schema lösen, das dem hier vorgestellten ähnelt.

Menü und Untermenü in einer select box

Die über DHTML realisierte Menuesteuerung ist ja allseits bekannt. Man hat einen Menüpunkt fährt mit der Maus über diesen Punkt ein neues Menü klappt auf unter welchem sich dann wieder neue Menüs verbergen. Bis zu einem gewissen Umfang ist das möglich. Es sind aber Anwendungsfälle denkbar, wo es so viele Menüpunkte gibt, etwa Foren oder Meinungsportale, dass dies kein gangbarer Weg mehr ist. Eine mögliche Lösung sähe dann so aus.

<html><head><title>test</title>
<script language="JavaScript">
autoren=new Array();

autoren["Thomas Mann"]=new Array;
autoren["Thomas Mann"][0]="Buddenbrocks";
autoren["Thomas Mann"][1]="Zauberberg";
autoren["Thomas Mann"][2]="Felix Krull";
autoren["Thomas Mann"][3]="Joseph und seine Brüder";
autoren["Thomas Mann"][4]="Lotte in Weimar";

autoren["Goethe"]=new Array;
autoren["Goethe"][0]="Faust";
autoren["Goethe"][1]="Iphiginie auf Tauris";
autoren["Goethe"][2]="Egmont";
autoren["Goethe"][3]="Torquato Tasso";
autoren["Goethe"][4]="Götz von Berlichingen";

autoren["Adorno"]=new Array;
autoren["Adorno"][0]="Minima Moralia";
autoren["Adorno"][1]="Ästhetische Theorie";
autoren["Adorno"][2]="Negative Dialektik";
autoren["Adorno"][3]="Aufklärung als Massenbetrug";
autoren["Adorno"][4]="Drei Studien zu Kant";

autoren["Mario Vargas Llosa"]=new Array;
autoren["Mario Vargas Llosa"][0]="Conversación en la catedral";
autoren["Mario Vargas Llosa"][1]="La guerra del fin del mundo";
autoren["Mario Vargas Llosa"][2]="La casa verde";
autoren["Mario Vargas Llosa"][3]="tia Julia y el escribidor";
autoren["Mario Vargas Llosa"][4]="Pantaleón y los usurpadores";

function zeigen()
{
gewaehlter_Wert=document.banane.eins.options[document.banane.eins.options.selectedIndex].value;


for(i=0;i<autoren[gewaehlter_Wert].length;i++)
{
optionen=new Option(autoren[gewaehlter_Wert][i]);
document.banane.zwei.options[i]=optionen;
document.banane.zwei.options[i].value=autoren[gewaehlter_Wert][i];
}
}
function zeigen2()
{
alert("Sie haben "+document.banane.zwei.options[document.banane.zwei.options.selectedIndex].value+" gewählt");
}

</script>
<body>
<form name="banane">
<select name="eins" onChange=zeigen();>
<option value="Thomas Mann">Thomas Mann
<option value="Goethe">Goethe
<option value="Adorno">Adorno
<option value="Mario Vargas Llosa">Mario Vargas Llosa
</select>
<select name="zwei" onChange=zeigen2();>
<option value="Buddenbrocks">Buddenbrocks
<option value="Zauberberg">Zauberberg
<option value="Felix Krull">Felix Krull
<option value="Joseph und seine Brüder">Joseph und seine Brüder
<option value="Lotte in Weimar">Lotte in Weimar
</select>
</form>
</body>
</html>

Schauen wir uns hier an, was dieses Skript macht.

Wir haben also eine Anzahl von Schriftstellern und wollen effizient auf deren Werke zugreifen. Wir wählen also einen aus. In der zweiten Box erscheinen dann deren Werke. Wählen wir dort dann ein Werk aus, wird uns dieses augeblendet. Wie deutlich zu erkennen, ist dieser Skript nicht einfach. Gehen wir es step by step durch
. Der ganze Skript basiert auf einem zweidimensionalen associative array, das heisst, die erste Dimension ist ein Array, bei dem der Index eine Zeichenkette ist, näheres siehe Arrays, Hashes, mehrdimensionale Arrays (Hashes). Die erste Dimension speichert den Autor, die zweite Dimension dessen Werke. Wählen wir nun in der ersten select box eine Option aus, wird der event handler onChange aktiviert.
Näheres hierzu unter event handler. Anschliessend fischen wir uns mit der Zeile
gewaehlter_Wert=document.banane.eins.options[document.banane.eins.options.selectedIndex].value;
(siehe oben) die angewählte Option heraus. Wir müssen jetzt verstehen, dass gewaehlter_wert einer der Schriftsteller ist (Goethe,Thomas Mann, Mario Vargas Llosa oder Adorno). Folglich ist erhalten wir mit autoren[gewaehlter_wert] einen der vier Arrays. Folglich ist z.B. autoren["Thomas Mann"][1] Buddenbrocks, autoren["Goethe"][2] Iphigenie auf Tauris, autoren["Mario Vargas Llosa"][3] La casa verde etc. etc.. autoren[gewaehlter_wert].length gibt uns die Anzahl der Elemente zurück, in unserem Falle also 5 (Arrays starten bei 0, folglich ist der höchste Index eines Arrays,der 5 Elemente hat, 4.) Diese fünf Optionen wollen wir nun in die zweite select box schiessen. Wir haben also innerhalb der for Schleife (siehe Schleifen) folgende drei dubiosen Zeilen.

1) optionen=new Option(autoren[gewaehlter_Wert][i]);<br>
2) document.banane.zwei.options[i]=optionen;<br>
3) document.banane.zwei.options[i].value=autoren[gewaehlter_Wert][i];<br>

Mit 1) richten wir hierbei eine neue Option ein, die den Namen (Namen ist hier das was der User sieht) autoren[gewaehlter_wert][i] hat. Wurde also Goethe gewählt, hat die Option in der ersten Runde den Wert Faust, in der zweiten Iphigenie auf Tauris, in der dritten Egmont, in der vierten Torquato Tasso und der fünften Götz von Berlichingen. Die zweite, genau so spannende Fragen lautet nun, wo wird diese Option eingefügt. Das bestimmen wir in 2). Wenn wir uns in einer for Schleife befinden, dann sehen wir sicher ein, dass i in jeder Runde einen hochzählt. Wir überschreiben also in 2) in jeder Runde durch einen neuen Wert. Fehlt nur noch der value, also nicht das, was der User sieht, sondern das, was tatsächlich übergeben wird. Das machen wir in 3). Der Option, die gerade angesprochen wird, weisen wir einen Wert zu. Das war es dann. Mag sein, dass das nicht gerade ein ästhetischer Hochgenuss ist, aber es ist ein Verfahren, eine effiziente Menüsteuerung zu realisieren, wenn sehr viele Themen vorhanden sind (Meinungsportale, Foren, Automärkte etc. etc.).

vorhergehendes Kapitel