Quelltext
<head>
<script language="JavaScript">
<!--
var MAX=3;
function init() {
preis1=document.form1.ein1.value;
preis2=document.form1.ein2.value;
preis3=document.form1.ein3.value;
}
function changed(obj) {
var anz;
var soll;
var diff;
var typ=obj.name.substring(0,3);
var num=obj.name.substring(3,9);
if(typ == "anz") {
var anz=parseInt(obj.value);
if(!(anz > 0)) {
anz=0;
obj.value="0";
}
document.form1["ges"+num].value=parseFloat(document.form1["ein"+num].value)*anz;
} else if(typ == "ein") {
alert("Finger weg !");
obj.value=eval("preis"+num);
} else if(typ == "ges") {
anz=parseInt(document.form1["anz"+num].value);
soll=parseFloat(document.form1["ein"+num].value)*anz;
diff=parseFloat(document.form1["ges"+num].value) - soll;
if(diff > 0.005) {
alert("Danke !");
} else if(diff < -0.005) {
alert("Nicht mit mir !");
document.form1["ges"+num].value=soll;
}
}
var total=0;
for (num=1; num<=MAX; num++) {
total+=parseFloat(document.form1["ges"+num].value);
}
document.form1.total.value=total;
}
function check() {
var status=true;
var email=document.form1.mailto.value;
if(email == "") {
alert("Bitte geben Sie Ihre email-Adresse ein !");
status=false;
} else {
kk=email.indexOf("@");
if(kk <= 0 || email.indexOf(".", kk) < 0) {
alert("email-Adresse ist nicht korrekt !");
status=false;
}
}
var anz=0;
for (num=1; num<=MAX; num++) {
anz+=parseFloat(document.form1["anz"+num].value);
}
if(anz < 1) {
alert("es wurde nichts bestellt !");
status=false;
}
if(status)status=confirm("Es werden "+anz+" Pizza bestellt.");
return status;
}
//-->
</script>
</head>
<body onLoad="init();">
<form name="form1" method="post" action="/cgi-bin/ub/cgi-mail"
onSubmit="return check();"
onReset="return confirm('wirklich rücksetzen ?');">
<input type="hidden" name="subject" value="JavaScript Pizza-Bestellung">
<h3>Bestellformular</h3>
Ihre email-Adresse:<br> <input type=text name="mailto" size=32>
<table border>
<tr><th>Anzahl<th>Bezeichnung<th>Einzelpreis<th>Gesamtpreis
<tr>
<td><input type="text" name="anz1" size=3 value="0" onChange="changed(this);">
<td>Pizza Margherita
<td><input type="text" name="ein1" size=7 value="7.50" onChange="changed(this);">
<td><input type="text" name="ges1" size=7 value="0" onChange="changed(this);">
<tr>
<td><input type="text" name="anz2" size=3 value="0" onChange="changed(this);">
<td>Pizza 4 Stagione
<td><input type="text" name="ein2" size=7 value="9.50" onChange="changed(this);">
<td><input type="text" name="ges2" size=7 value="0" onChange="changed(this);">
<tr>
<td><input type="text" name="anz3" size=3 value="0" onChange="changed(this);">
<td>Pizza Fantasia
<td><input type="text" name="ein3" size=7 value="11.00" onChange="changed(this);">
<td><input type="text" name="ges3" size=7 value="0" onChange="changed(this);">
<tr>
<td>
<th>Gesamtsumme
<td>
<td><input type="text" name="total" size=7 onChange="changed(this);">
</table>
<input type="submit" value="Bestellen">
<input type="reset" value="Rücksetzen">
</form>
</body>
Erläuterung
Die Funktion "init" wird beim Laden der Seite (onLoad) aufgerufen. Sie liest
die in den Feldern "Einzelpreis" vorgegebenen Preise und legt diese in
entsprechenden Variablen ab (um Inkonsistenzen zwischen Formular und Script
zu vermeiden, wird der Preis nur an genau einer Stelle im HTML-Dokument
eingetragen - nämlich im Formular).
Die Funktion "changed" wird aufgerufen, wenn der Anwender den Inhalt eines
der Eingabefelder geändert hat (onChange). Als Parameter
wird das Objekt "this" übergeben, das in diesem Zusammenhang auf das
geänderte Eingabefeld zeigt. Anhand des Namens des übergebenen
Objektes entscheidet die Funktion "changed", ob ein Feld "Anzahl", "Einzelpreis"
oder "Gesamtpreis" geändert wurde und führt eine entsprechende
Aktion aus. In jedem Fall wird abschließend die "Gesamtsumme" neu
berechnet und gesetzt.
Die Funktion "check" wird aufgerufen, wenn der Anwender den "Bestellen"-Knopf
betätigt (onSubmit). In der Funktion wird geprüft, ob eine sinnvolle
email-Adresse eingegeben wurde und ob überhaupt etwas bestellt wurde.
Falls die Prüfung einen Fehler findet, wird die Funktion mit
"return false" verlassen. Dies bewirkt, daß das Formular nicht
abgesendet wird (Netscape 2.0 sendet es doch).
Das im Formular verwendete Ereignis onReset ist erst in
V 1.1 definiert.
Die im Beispiel verwendeten string-Funktion charAt
und substring werden auf Seite 10
besprochen.
Übungsaufgabe
Erstellen Sie ein Formular, mit dem DM-Beträge in eine vom Benutzer
ausgewählte Fremdwährung umgerechnet werden können bzw.
aus der Fremdwährung in DM.
Lösung
