|
Von allen Plagen, mit denen Gott, der Herr, unser Wirtschaftsleben heimsucht, ist die Bürokratie die weitaus schlimmste.
– Ephraim Kishon Kapitel 9 Formulare
Es gibt prinzipiell drei Einsatzgebiete für JavaScript: grafische Effekte (Beispiele gibt es zum ersten Mal in Kapitel 11, Navigationshilfen zum Beispiel in Kapitel 8 und 31) und echte Interaktion mit dem Benutzer. Interaktion bedeutet hier, dass der Benutzer etwas tut und die Webseite sich dementsprechend verändert. Sehr oft benutzt man hierzu HTML-Formulare. Das hat mehrere Gründe. HTML-Schaltflächen eignen sich vorzüglich, um JavaScript-Funktionen auszuführen, und in HTML-Eingabefeldern kann man Daten vom Benutzer abfragen. In diesem Kapitel soll es primär darum gehen, einen HTML-Fragebogen mit JavaScript-Funktionalität zu versehen.
9.1 Überprüfung auf Vollständigkeit  
Sie haben das garantiert schon einmal im World Wide Web gesehen: Wenn Sie sich bei einem Freemail-Dienst, einer Online-Community oder bei einem Online-Kaufhaus registrieren, müssen Sie einige persönliche Angaben machen. Die Betreiber der Website haben natürlich ein großes Interesse daran, dass das Formular vollständig ausgefüllt wird. Das kann serverseitig gelöst werden, was den Vorteil hat, dass die Überprüfung auch mit wirklich jedem Browser funktioniert. Die Nachteile liegen aber gleichzeitig auf der Hand. Nicht immer steht dem Programmierer eine serverseitige Programmiersprachen-Unterstützung zur Verfügung. Der Programmieraufwand ist hierbei recht hoch, denn es soll ja nicht nur eine Fehlermeldung ausgegeben werden, sondern wenn möglich das Formular auch noch mit den zuvor eingegebenen Daten dargestellt werden. Es wäre schon sehr ärgerlich für den Benutzer, wenn er ein Formular fast vollständig ausgefüllt hätte und aufgrund einer einzigen Auslassung das komplette Formular noch einmal ausfüllen müsste.
Mit JavaScript kann auch auf der Clientseite die Überprüfung auf Vollständigkeit durchgeführt werden. Damit wird keine neue Seite in den Browser geladen. Die Formulardaten bleiben unangetastet, und der Benutzer kann sofort den Fehler korrigieren.
Im Folgenden finden Sie ein HTML-Formular, das ausschließlich aus Pflichtfeldern bestehen soll. Nach dem Anklicken der Absenden-Schaltfläche soll die Funktion pruefen() aufgerufen werden, die überprüft, ob das Formular vollständig ausgefüllt worden ist, und gegebenenfalls eine Fehlermeldung ausgibt. Diese Funktion wird in diesem Kapitel schrittweise erarbeitet. Vorab jedoch gibt es noch ein paar Hinweise, wie diese Funktion in das HTML-Dokument eingebunden wird.
Das <form>-Tag hat den Event-Handler onsubmit, der ausgelöst wird, sobald das Formular abgeschickt wird. Wie schon bei anderen Beispielen in diesem Buch kann hier ein altbekannter Trick angewandt werden. Beim Versenden des Formulars kollidieren wieder die HTML-Konsequenzen des Versendens (nämlich das Aufrufen einer anderen Seite) und die mit onsubmit zugeordneten JavaScript-Aktionen. Endet der onsubmit-Event-Handler jedoch auf return false, so wird die HTML-Aktion (das Aufrufen der anderen Seite) nicht ausgeführt; bei return true wird sie ausgeführt. Also hat das <form>-Tag in diesem Beispiel folgenden Aufbau:
<form action="/cgi-bin/skript" name="Fragebogen"
onsubmit="return pruefen();">
Die Funktion pruefen() gibt nur dann true zurück, wenn das Formular vollständig ausgefüllt worden ist, ansonsten gibt sie false zurück. Somit ist sichergestellt, dass nur vollständige Formulare verschickt werden – sofern der Browser des Benutzers JavaScript unterstützt und der Benutzer es auch aktiviert hat. Ältere Browser oder solche mit ausgeschaltetem JavaScript ignorieren den Skriptteil komplett und versenden das Formular direkt.
<html>
<head>
<title>Formular-Überprüfung</title>
<script type="text/javascript"><!--
function pruefen() {
// ... kommt noch
return true;
}
//--></script>
</head>
<body>
<h1>Anmeldeformular</h1>
<form action="/cgi-bin/skript" name="Fragebogen"
onsubmit="return pruefen()">
Vorname: <input type="text" name="Vorname" /><br />
Nachname: <input type="text" name="Nachname" /><br />
E-Mail-Adresse: <input type="text" name="Email" /><br />
<input type="radio" name="Geschlecht" value="m" />
männlich |
<input type="radio" name="Geschlecht" value="w" />
weiblich<br />
Welche Bücher von Galileo Press besitzen Sie?<br />
<input type="checkbox" name="Flash" /> Flash |
<input type="checkbox" name="JavaScript"> JavaScript |
<input type="checkbox" name="ActionScript">
Einstieg in ActionScript<br />
Welches der Bücher hat das schönste Cover?
<select name="Cover">
<option>Bitte wählen</option>
<option value="Flash">Flash</option>
<option value="JavaScript">JavaScript</option>
<option value="ActionScript">Einstieg in ActionScript
</option>
</select><br />
<input type="submit" value="Absenden" />
<input type="reset" value="Formular löschen" />
</form>
</body>
</html>
Hier klicken, um das Bild zu Vergrößern
Abbildung 9.1 Das (noch) funktionslose Formular
9.1.1 Allgemeiner Aufbau 
Alle Formulare werden im Array document.forms gespeichert. Auf dieses Formular kann über den Array-Index zugegriffen werden, wobei die Formulare in der Reihenfolge im Array stehen, in der sie im HTML-Dokument vorkommen. Die Nummerierung beginnt beim Index 0. In unserem Beispiel benutzen wir also document.forms[0].
Alternativ dazu kann man auch über das name-Attribut des <form>-Tags auf das Formular zugreifen, im Beispiel also mit document.Fragebogen. Sollte das name-Attribut Spezialzeichen wie etwa das Leerzeichen enthalten (beispielsweise "Mein Fragebogen"), so kann noch mit document. forms["Mein Fragebogen"] darauf zugegriffen werden, allerdings erst ab JavaScript Version 1.1. Im Allgemeinen aber sollten Sie den Array-Index verwenden. Da die meisten HTML-Seiten maximal ein Formular enthalten, reicht ein document.forms[0], und es ist auch nicht sonderlich unleserlich. Bei anderen Arrays, die viele Elemente besitzen, ist dieses Vorgehen sicherlich unpraktikabel.
Das Formular speichert all seine Elemente (also alle HTML-Formularelemente in diesem Formular) im Array elements. Auch hier kann man auf die einzelnen Elemente über den Array-Index zugreifen; im obigen Beispiel greift man auf das erste Texteingabefeld mit document.forms[0]. elements[0] zu. Alternativ können Sie auch wieder das name-Attribut verwenden, in diesem Fall document.forms[0].Vorname. Die meisten Formularelemente haben eine Eigenschaft value, die in der Regel die Eingabe des Benutzers angibt. Details hierzu finden Sie in den entsprechenden Abschnitten.
Zur Vereinfachung wird folgende Zeile am Anfang der Funktion pruefen() eingeführt:
var f = document.Fragebogen;
Hiermit spart man sich ein wenig Tipparbeit; statt document. Fragebogen.elements[0] reicht jetzt f.elements[0].
9.1.2 Texteingabefelder
Unter Texteingabefeldern verstehen wir in diesem Zusammenhang Formularfelder, die folgendermaßen in HTML abgebildet werden:
 |
<input type="text" /> – einzeiliges Texteingabefeld |
| |
<input type="password" /> – einzeiliges Passwortfeld |
| |
<input type="hidden" /> – unsichtbares Formularfeld |
| |
<textaera> – mehrzeiliges Texteingabefeld |
In diesem Fall gestaltet sich die Vollständigkeitsabfrage sehr einfach. Wie oben schon ausgeführt wurde, heißt die Eigenschaft, die den Eingabewert im Texteingabefeld enthält, value. Der folgende JavaScript-Code kann also in die Funktion pruefen() eingefügt werden. Er funktioniert folgendermaßen: Ist ein Texteingabefeld nicht ausgefüllt, wird die Funktion mit return false verlassen, was dann zur Folge hat, dass das Formular nicht versandt wird.
if (f.Vorname.value == "") {
return false;
}
if (f.Nachname.value == "") {
return false;
}
if (f.Email.value == "") {
return false;
}
Auf eine Besonderheit bei Texteingabefeldern muss ich noch hinweisen: Wenn Sie mehrere Texteingabefelder mit identischen name-Attributen haben, werden die Werte in einem Array gespeichert. Enthielte das Beispielformular von oben also noch ein Texteingabefeld namens Vorname, könnte man auf das erste dieser Felder mit f.Vorname[0] zugreifen und auf das zweite Feld mit f.Vorname[1]. Aus Gründen der Einfachheit (und zur Verringerung der Fehlermöglichkeiten) ein einfacher Tipp: Verwenden Sie stets eindeutige Bezeichnungen für Ihre Formularelemente.
9.1.3 Radiobuttons
Aus einer Gruppe Radiobuttons kann immer nur einer ausgewählt werden. Eine Gruppe von Radiobuttons ist durch ein identisches name-Attribut gekennzeichnet. Leider greift man im obigen Beispiel mit f.Geschlecht auf die Gruppe von Radiobuttons mit dem name-Attribut Geschlecht zu. Die Eigenschaft value liefert hier nicht das richtige Ergebnis: Es muss auf einen individuellen Radiobutton zugegriffen werden. Das wäre natürlich über das elements-Array möglich, aber es gibt einen eleganteren Weg. Analog zu Texteingabefeldern werden gleichnamige Radiobuttons auch in einem Array abgespeichert. Mit der folgenden Schleife werden alle Radiobuttons (in diesem Falle zwei) durchlaufen, und es wird überprüft, ob der Button ausgewählt ist (boolesche Eigenschaft checked). Wenn beide nicht ausgewählt sind, wird pruefen() mit return false verlassen.
var geschlecht_ok = false;
for (var i=0; i<f.Geschlecht.length; i++) {
if (f.Geschlecht[i].checked) {
geschlecht_ok = true;
}
}
if (!geschlecht_ok) {
return false;
}
Alternativ dazu können Sie eine Variante ohne Schleife benutzen, die etwas kürzer ist:
if (!(f.Geschlecht[0].checked || f.Geschlecht[1].checked)) {
return false;
}
9.1.4 Checkboxen
Checkboxen können wie Radiobuttons ausgewählt werden, wobei sich die grafische Darstellung leicht unterscheidet: Checkboxen werden angekreuzt. Da Checkboxen nicht gruppiert sind, also jede Checkbox für sich ausgewählt werden kann (oder auch nicht), ist die Überprüfung, ob sie ausgefüllt wurden, nicht weiter schwer. Wieder gibt es eine boolesche Eigenschaft checked, die angibt, ob eine Checkbox angekreuzt ist oder nicht. Das Formular ist dann unvollständig ausgefüllt, wenn keine der drei Checkboxen angekreuzt worden ist.
if (!f.Flash.checked && !f.JavaScript.checked && !f.ActionScript.checked) {
return false;
}
9.1.5 Auswahllisten
Eine HTML-Auswahlliste wird mit dem Tag <select> eingeleitet. Es ist sinnvoll, diesem Tag ein aussagekräftiges name-Attribut zu geben. Die einzelnen Elemente werden durch das HTML-Tag <option> dargestellt. Dieses Tag hat standardmäßig kein name-Attribut; wenn man also dort Informationen unterbringen will, sollte man das value-Attribut besetzen.
Beim Einsatz von JavaScript kann auf die Auswahlliste über das name-Attribut des <select>-Tags zugegriffen werden. Die einzelnen Optionen sind im Array options abgespeichert. Jede Option hat die boolesche Eigenschaft selected, die angibt, ob die entsprechende Option gerade ausgewählt ist. Mit der Eigenschaft value kann auf das value-Attribut der Option zugegriffen werden.
Im Fragebogen-Beispiel kommt es darauf an, dass nicht die erste Option ausgewählt wird, denn die heißt "Bitte wählen". Ein erster Versuch der Abfrage lautet also folgendermaßen:
if (f.Cover.options[0].selected) {
return false;
}
Wenn festgestellt werden soll, welche der Optionen gerade ausgewählt ist, könnte man auf die Idee kommen, das options-Array mit einer Schleife zu durchlaufen, um so den Index der ausgewählten Option herauszubekommen:
for (var i=0; i<f.Cover.options.length; i++) {
if (f.Cover.options[i].selected) {
var Auswahl = i;
}
}
if (Auswahl == 0) {
return false;
}
Diese Arbeit kann man sich jedoch sparen: Auswahllisten haben die Eigenschaft selectedIndex, die den Array-Index der ausgewählten Option angibt. Die Abfrage kann also folgendermaßen vereinfacht werden:
if (f.Cover.selectedIndex==0) {
return false;
}
Es gibt auch Auswahllisten, bei denen mehr als eine Option ausgewählt werden kann. Diese sind in HTML mit <select multiple> abgebildet. In diesem Fall enthält selectedIndex den Index der obersten ausgewählten Option. Wenn Sie dagegen auf alle ausgewählten Listenelemente zugreifen möchten oder wenn es mehrere »leere« Listenelemente gibt (etwa Einträge mit Trennlinien oder ohne Text), müssen Sie eine for-Schleife nach obigem Muster verwenden.
9.1.6 Fehlermeldung ausgeben
Hier wird noch einmal der komplette Code für die Vollständigkeitsüberprüfung des Formulars wiedergegeben. Es wurden Kommandos hinzugefügt, die eine Warnmeldung ausgeben, sofern das Formular unvollständig ausgefüllt worden ist.
function pruefen(){
var f = document.forms[0];
var fehler = ""; //enthält die Bezeichnungen
//der nicht ausgefüllten Felder
// *** Überprüfung auf vollständige Ausfüllung
if (f.Vorname.value == "") {
fehler += "Vorname ";
}
if (f.Nachname.value == "") {
fehler += "Nachname ";
}
if (f.Email.value == "") {
fehler += "E-Mail ";
}
if (!(f.Geschlecht[0].checked || f.Geschlecht[1]
.checked)) {
fehler += "Geschlecht ";
}
if (!f.Flash.checked && !f.JavaScript.checked &&
!f.ActionScript.checked) {
fehler += "Lieblingsbuch ";
}
if (f.Cover.selectedIndex == 0) {
fehler += "Cover ";
}
// *** Gegebenenfalls Fehlermeldung
if (fehler != "") {
var fehlertext = "Die folgenden Felder wurden
nicht vollständig ausgefüllt:\n";
fehlertext += fehler;
alert(fehlertext);
return false;
}
return true;
}
Hier klicken, um das Bild zu Vergrößern
Abbildung 9.2 Hinweis auf nicht ausgefüllte Felder
9.1.7 Konstruktive Vorschläge
Anstatt bei Texteingabefeldern eine Fehlermeldung auszugeben, kann man auch die Methode window.prompt() benutzen, um den Benutzer direkt zu einer Texteingabe zu zwingen. In Kapitel 8 wurde window. prompt() schon erläutert. Man muss in diesem Beispiel noch zusätzlich beachten, dass man die value-Eigenschaft der Texteingabefelder auch auf den eingegebenen Wert setzt, damit diese Daten auch an das serverseitige Skript übergeben werden können.
Die Funktion pruefen() muss also folgendermaßen abgeändert werden:
function pruefen() {
var f = document.forms[0];
var fehler = ""; //enthält die Bezeichnungen
//der nicht ausgefüllten Felder
// *** Überprüfung auf vollständige Ausfüllung
while (f.Vorname.value == "") {
var vorname = prompt("Bitte geben Sie Ihren
Vornamen ein!");
if (vorname) {
f.Vorname.value = vorname;
}
}
while (f.Nachname.value == "") {
var nachname = prompt("Bitte geben Sie Ihren
Nachnamen ein!");
if (nachname) {
f.Nachname.value = nachname;
}
}
while (f.Email.value == "") {
var email = prompt("Bitte geben Sie Ihre E-Mail-
Adresse ein!");
if (email) {
f.Email.value = email;
}
}
if (!(f.Geschlecht[0].checked || f.Geschlecht[1]
.checked)) {
fehler += "Geschlecht ";
}
if (!f.Flash.checked && !f.JavaScript.checked &&
!f.ActionScript.checked) {
fehler += "Lieblingsbuch ";
}
if (f.Cover.selectedIndex==0) {
fehler += "Cover ";
}
// *** Gegebenenfalls Fehlermeldung
if (fehler != "") {
var fehlertext = "Die folgenden Felder wurden
nicht vollständig ausgefüllt:\n";
fehlertext += fehler;
alert(fehlertext);
return false;
}
return true;
}
Hier klicken, um das Bild zu Vergrößern
Abbildung 9.3 Nicht ausgefüllte Texteingabefelder können direkt korrigiert werden.
Der Benutzer steckt in einer Endlosschleife fest und wird gezwungen, die Angaben zu machen, ansonsten geht es nicht weiter. So ein Abfragefenster wirkt allerdings relativ aufdringlich, und wenn ein Benutzer partout nichts angeben will, dann macht er eben falsche Angaben. Sie werden mit diesen Mitteln niemanden dazu bringen, die Wahrheit zu sagen, wenn er nichts über sich preisgeben will. Vergisst aber jemand, ein Mussfeld auszufüllen, bieten Sie ihm eine bequeme Möglichkeit an, dies nachzuholen.
Testen Sie Ihren Code sehr gründlich. Folgender Tippfehler führt dazu, dass der Benutzer in einer Endlosschleife festsitzt, die er nicht mehr verlassen kann:
while (f.Email.value=="") {
var email = prompt("Bitte geben Sie Ihre E-Mail-
Adresse ein!")
if (email) {
f.Nachname.value = email;
}
}
Dieser Fehler schleicht sich bei der Verwendung von Copy&Paste sehr schnell ein (raten Sie, woher ich das weiß L), und er ruiniert das Skript. Nicht das Email-Feld wird aktualisiert, sondern das Nachname-Feld. Außerdem bleibt das Email-Feld immer leer, egal was der Benutzer in das Abfragefenster eingibt. Es geht also an dieser Stelle nicht weiter, und der Benutzer kommt so schnell nicht wieder auf Ihre Seiten.
|
