Galileo Computing < openbook > Galileo Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Galileo Computing
ISBN 3-89842-859-1
gp Kapitel 9 Formulare
  gp 9.1 Überprüfung auf Vollständigkeit
    gp 9.1.1 Allgemeiner Aufbau
    gp 9.1.2 Texteingabefelder
    gp 9.1.3 Radiobuttons
    gp 9.1.4 Checkboxen
    gp 9.1.5 Auswahllisten
    gp 9.1.6 Fehlermeldung ausgeben
    gp 9.1.7 Konstruktive Vorschläge
  gp 9.2 Automatische Überprüfung
    gp 9.2.1 Texteingabefelder
    gp 9.2.2 Radiobuttons
    gp 9.2.3 Checkboxen
    gp 9.2.4 Auswahllisten
    gp 9.2.5 Zusammenfassung
  gp 9.3 Anwendungsmöglichkeiten für Formulare
    gp 9.3.1 Währungsrechner
    gp 9.3.2 Währungsrechner, Teil 2
    gp 9.3.3 Formularfelder für die Textausgabe nutzen
    gp 9.3.4 Navigation mit Auswahllisten
  gp 9.4 Anwendungsbeispiel: Fensteroptionen
  gp 9.5 Daten behalten
    gp 9.5.1 Das Eingabeformular
    gp 9.5.2 Die Ausgabeseite
  gp 9.6 Dynamische Auswahllisten
    gp 9.6.1 Ein erster Ansatz
    gp 9.6.2 Ein fortgeschrittener Ansatz
  gp 9.7 Überprüfungsfunktionen
    gp 9.7.1 Ganze Zahlenwerte
    gp 9.7.2 Dezimalzahlen
    gp 9.7.3 Telefonnummern
    gp 9.7.4 E-Mail-Adressen
    gp 9.7.5 In Zahlenwerte umwandeln
  gp 9.8 Reguläre Ausdrücke
    gp 9.8.1 Kurzeinführung
    gp 9.8.2 Ein Objekt erzeugen
    gp 9.8.3 Mit dem Objekt arbeiten


Galileo Computing

9.3 Anwendungsmöglichkeiten für Formulare  downtop

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.


Galileo Computing

9.3.1 Währungsrechner  downtop

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:

gp  In einem Texteingabefeld gibt der Benutzer den Betrag in einer Währung ein.
gp  In welche Richtung umgerechnet werden soll, also D-Mark in Euro oder umgekehrt, wird mit Radiobuttons ausgewählt.
gp  Die Umrechnung wird gestartet, indem eine Schaltfläche angeklickt wird.
gp  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>

Abbildung
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.


Galileo Computing

9.3.2 Währungsrechner, Teil 2  downtop

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.


Galileo Computing

9.3.3 Formularfelder für die Textausgabe nutzen  downtop

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 ...');" />

Galileo Computing

9.3.4 Navigation mit Auswahllisten  toptop

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.

 <<   zurück
  
  Zum Katalog
Zum Katalog: JavaScript und AJAX
JavaScript und AJAX
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: JavaScript und AJAX - Das Video-Training






 JavaScript und AJAX -
 Das Video-Training


Zum Katalog: Webseiten programmieren und gestalten






 Webseiten
 programmieren
 und gestalten


Zum Katalog: XHTML, HTML und CSS






 XHTML, HTML und CSS


Zum Katalog: CSS-Praxis






 CSS-Praxis


Zum Katalog: AJAX






 AJAX


Zum Katalog: PHP 5 und MySQL 5






 PHP 5 und MySQL 5


Zum Katalog: TYPO3 4.0






 TYPO3 4.0


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Galileo Press 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Galileo Computing]

Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de