9.3 Anwendungsmöglichkeiten für Formulare  
Neben einer einfachen Überprüfung von Benutzereingaben auf Vollständigkeit können Formulare auch noch anderweitig verwendet werden. In diesem Abschnitt werden einige Anwendungsmöglichkeiten vorgestellt, die Sie vielleicht schon in ähnlicher Form im World Wide Web gesehen haben. Sie können sie direkt auf Ihrer Website einsetzen.
9.3.1 Währungsrechner 
Der Kurs D-Mark/Euro ist ja leider nicht exakt 2:1, so dass ein Umrechner in Zeiten des »Teuro« immer noch ein praktisches Hilfsmittel ist (Marke: »wie billig früher doch alles war«). Das Skript wird folgendermaßen aufgebaut:
 |
In einem Texteingabefeld gibt der Benutzer den Betrag in einer Währung ein. |
| |
In welche Richtung umgerechnet werden soll, also D-Mark in Euro oder umgekehrt, wird mit Radiobuttons ausgewählt. |
| |
Die Umrechnung wird gestartet, indem eine Schaltfläche angeklickt wird. |
| |
Der umgerechnete Betrag wird in einem neuen Texteingabefeld angezeigt. |
Die größte Schwierigkeit besteht darin, die Eingaben des Benutzers eventuell umzuformen. JavaScript verwendet das amerikanische Zahlenformat, und das kennt nur einen Dezimalpunkt, kein Dezimalkomma. Also wird das erste Komma durch einen Punkt ersetzt. Die Umwandlung der Zeichenkette in eine Dezimalzahl geschieht automatisch durch die Multiplikation mit dem bzw. Division durch den amtlichen Umrechnungskurs. Andernfalls könnten Sie die Funktionen eval() oder parseFloat() verwenden.
<html>
<head>
<title>Euro-Rechner</title>
<script type="text/javascript"><!--
function umrechnen(f) { //f ist eine Referenz
//auf das Formular
var betrag = f.betrag.value;
if (betrag.indexOf(",")!=-1) {
betrag = betrag.substring(0, betrag.indexOf(",")) + "." +
betrag.substring(betrag.indexOf(",")+1, betrag.length);
}
if (f.umrechnung[0].checked) {
f.ausgabe.value = betrag / 1.95583;
} else {
f.ausgabe.value = 1.95583 * betrag;
}
}
//--></script>
</head>
<body>
<form>
<input type="text" name="betrag" /><br />
<input type="radio" name="umrechnung" value="DMEUR" checked="checked" /> DM nach Euro |
<input type="radio" name="umrechnung" value="EURDM" /> Euro nach DM<br />
<input type="button" value="Umrechnen!"
onclick="umrechnen(this.form)" />
<input type="text" name="ausgabe" />
</form>
</body>
</html>
Hier klicken, um das Bild zu Vergrößern
Abbildung 9.4 Der Währungsrechner in Aktion
Beachten Sie bei obigem Code den Aufruf umrechnen(this.form). Innerhalb jedes Event-Handlers eines Formularelements bezieht sich this auf das entsprechende Formularelement. Nun haben alle Formularelemente praktischerweise eine Eigenschaft form, die eine Referenz auf das dazugehörige Formular darstellt. Man kann also mit this.form das Formular als Parameter direkt an die Funktion übergeben.
9.3.2 Währungsrechner, Teil 2
Der Währungsrechner lässt sich mit relativ wenig Aufwand so erweitern, dass auch der Euro-Kurs anderer Währungen ermittelt werden kann. Insbesondere bei international ausgerichteten Webseiten ist das ein netter Service. Die Idee dahinter ist folgende: Die verschiedenen Währungen stehen alle in einer Auswahlliste. Die beiden Radiobuttons sind mit »nach Euro« und »von Euro« beschriftet. Nach einem Klick auf die Schaltfläche wird zunächst das Umtauschverhältnis zwischen Euro und der ausgewählten Währung ermittelt. Dieser Faktor ist in einem Array abgespeichert worden, so dass der Wert von selectedIndex der Auswahlliste direkt als Array-Index verwendet werden kann. Je nachdem, welcher Radiobutton angeklickt worden ist, wird der eingegebene Betrag entweder durch den Umrechnungsfaktor geteilt oder damit multipliziert.
<html>
<head>
<title>Euro-Rechner Teil 2</title>
<script type="text/javascript"><!--
var kurs = new Array();
kurs[0] = 1.95583;
kurs[1] = 6.55957;
kurs[2] = 1937.98450;
function umrechnen(f) { //f ist eine Referenz
//auf das Formular
var betrag = f.betrag.value;
if (betrag.indexOf(",")!=-1) {
betrag = betrag.substring(0, betrag.indexOf(","))
+ "." +
betrag.substring(betrag.indexOf(",")+1,
betrag.length);
}
var faktor = kurs[f.Waehrung.selectedIndex];
if (f.umrechnung[0].checked) {
f.ausgabe.value = betrag / faktor;
} else {
f.ausgabe.value = faktor * betrag;
}
}
//--></script>
</head>
<body>
<form>
<input type="text" name="betrag" />
<select name="Waehrung">
<option>DM</option>
<option>Franc</option>
<option>Lira</option>
</select>
<br>
<input type="radio" name="umrechnung" value="nachEUR" checked="checked" /> nach Euro |
<input type="radio" name="umrechnung" value="vonEUR" /> von Euro<br />
<input type="button" value="Umrechnen!" onclick="umrechnen(this.form)" />
<input type="text" name="ausgabe" />
</form>
</body>
</html>
Natürlich können Sie das Beispiel auch umschreiben, sodass Sie mit dem Euro als Referenzwährung zwischen zwei verschiedenen Währungen umrechnen können. Wenn Sie andere Währungen mit aufnehmen, beispielsweise den US-Dollar, müssen Sie den Kurs möglichst häufig aktualisieren, da er sich permanent ändert.
9.3.3 Formularfelder für die Textausgabe nutzen
Wenn man Nachrichten für den Benutzer ausgeben will, ist ein Fenster via window.alert() etwas aufdringlich, und auch das Schreiben in die Statuszeile hat seine Nachteile. Ein Texteingabefeld eignet sich hierfür jedoch wunderbar. Zwar sind auch hier die gestalterischen Möglichkeiten eingeschränkt, aber man muss die Nachteile gegeneinander abwägen. Wie der Lese- und Schreibzugriff auf Texteingabefelder vonstatten geht, haben Sie weiter oben in diesem Kapitel gesehen, das ist also kein Problem mehr.
Etwas ärgerlich ist es jedoch, wenn der Benutzer denkt, er müsse in dieses Texteingabefeld etwas schreiben. Aus diesem Grund wäre es wünschenswert, wenn man das Feld mit einem Schreibschutz (für den Benutzer) versehen könnte. Modernere Browser bieten dafür ein eigenes HTML-Attribut an, aber im Sinne einer allgemein verträglichen Lösung muss man sich mit JavaScript behelfen.
Texteingabefelder kennen den Event-Handler onfocus, der genau dann aktiv wird, wenn der Fokus auf dem Texteingabefeld landet (in der Regel sieht man, dass hineingeklickt wird und der Cursor blinkt). Das Gegenteil vom Erhalten des Fokus heißt auf Englisch »to blur« (dt. »verschwimmen«, »undeutlich werden«), und jedes Texteingabefeld besitzt eine Methode namens blur(), die den Fokus entfernt. Durch folgende Zeile wird der Fokus also genau dann von einem Feld weggenommen, wenn es angeklickt wird. Der Benutzer ist also nicht in der Lage, dem Feld permanent den Fokus zu geben und Eingaben zu tätigen.
<input type="text" onfocus="this.blur();" />
Beachten Sie unbedingt die Reihenfolge! Das folgende Kommando würde dafür sorgen, dass ein Feld immer den Fokus erhält, und somit eine weitere Navigation oder Benutzung der Website verhindern. Dem Benutzer würde kaum etwas anderes übrig bleiben, als seinen Browser zu schließen.
<input type="text" onblur="this.focus();" />
Seien Sie ebenfalls vorsichtig, wenn Sie modale Fenster in Verbindung mit onfocus verwenden. Wenn sich ein modales Fenster öffnet, verliert das Texteingabefeld natürlich den Fokus. Es erhält ihn aber wieder, sobald das modale Fenster wieder geschlossen wird. Der folgende Code zwingt den Benutzer wahrscheinlich dazu, den Browser über das System »abzuschießen«, da sich immer wieder ein modales Fenster öffnet:
<input type="text" onfocus="windows.alert('Die Geister, die ich rief ...');" />
9.3.4 Navigation mit Auswahllisten
Links benötigen viel Platz. Eine Auswahlliste ist da sehr sparsam, kann hinter dem sparsamen Äußeren jedoch eine Menge Inhalt verbergen. So ist es schon auf vielen Webseiten üblich, in einer Auswahlliste mehrere Navigationsziele anzugeben. Sobald Sie einen Punkt in der Auswahlliste anklicken, wird die entsprechende Seite aufgerufen.
Dazu benötigt man einen Event-Handler, der dann aktiv wird, wenn sich die aktuelle Auswahl der Auswahlliste ändert. Dieser Event-Handler heißt onchange und wird von allen Browsern unterstützt.
Im unteren Beispiel wird wieder eine Referenz auf das aktuelle Formular an die JavaScript-Funktion übergeben. Die URLs werden in einem Array gespeichert.
<html>
<head>
<title>Navigation mit JavaScript</title>
<script type="text/javascript"><!--
var urls = new Array();
urls[0] = ""; //leere URL für oberste Option
urls[1] = "http://www.mozilla.com/ ";
urls[2] = "http://www.microsoft.com/germany";
urls[3] = "http://www.opera.com/";
function laden(f) {
if (f.auswahl.selectedIndex > 0) {
location.href = urls[f.auswahl.selectedIndex];
}
}
//--></script>
</head>
<body>
<h1>Navigation mit JavaScript</h1>
<form>
<select name="auswahl" onchange="laden(this.form)">
<option>Bitte wählen</option>
<option>Mozilla</option>
<option>Microsoft</option>
<option>Opera</option>
</select>
<input type="button" value="Laden" onclick="laden(this.form)" />
</form>
</body>
</html>
Sie wissen ja bereits, wie Sie mit JavaScript allgemein auf Formulardaten zugreifen können. Im weiteren Verlauf dieses Kapitels werden einige fortgeschrittenere Techniken dargestellt, wie man Formulare sinnvoll nutzen kann. Neben neuen Möglichkeiten der Formularüberprüfung lernen Sie hier auch einige Tricks und Kniffe, die in der täglichen Praxis von Nutzen sein können.
|
