Formular zur Preisberechnung funktioniert nicht
seos2k
- javascript
Hallo Community, ich hab eine Seite mit einem Formular, darauf befinden sich 3 Radiobuttons zur Auswahl zwischen Frühstück, Halb- und Vollpension. Frühstück kostet 50€ pro Nacht, Halbpension 65€ und Vollpension 80€, zusätzlich gibt es noch ein Kontrollkästchen zur Auswahl eines Zimmers mit Balkon, was pro Nacht 10€ Zuschlag kostet
Dann sind da noch zwei Textfelder , eines wo man die Anzahl der Übernachtungen einfügt, und eine anderes , das den Preis ausgibt.
Mein Script dazu ist leider fehlerhaft, es wird kein Preis ausgegeben, der sollte immer dann erscheinen , sobald irgendeine Kombination ausgewählt ist, also ohne zusätzliches Button-klicken onchange. Wer kann mir helfen, hier mal der Komplette Quelltext:
<html>
<head>
<title>Hotelpreise</title>
<script language="JavaScript">
function berechne()
var g = document.f.ü.value-0;
if (document.f.J[0].checked) z = g * 50;
if (document.f.J[0].checked) z = g * 65;
if (document.f.J[0].checked) z = g * 80;
if (document.f.cb.checked) z= z + g*10;
document.f.p.value = z;
)
</script>
</head>
<body >
<form name="f">
<table class=form >
<tr><td class=r><input type="radio" name="J" value=50 onChange="berechne()" checked>  Frühstück <td class=r><input type="checkbox" name="cb" value=10 onChange="berechne()" checked>mit Balkon</td></tr>
<tr><td><input type="radio" name="J" value=65 onChange="berechne()" >  Halbpension</td></tr>
<tr><td><input type="radio" name="J" value=80" onChange="berechne()">  Vollpension</td></tr>
<tr><td class=l>Übernachtungen  <input type="text" size=10 value=1 name= "ü" onChange="berechne();"></td><td class=l>Preis (Euro)  <input type="text" size=10 name="p" readonly></td></tr>
</table>
</form>
</body>
</html>
Ich weiß, das ich bei den Radiobuttons den Value gesetzt hab und im Script doch nicht verwende, aber wenn jemand die Lösung hat wäre ich dankbar.
okay, ich hab die größten Fehler selbst gefunden, sieht nun so aus
<html>
<head>
<title>Hotelpreise</title>
<script language="JavaScript">
function berechne() {
var g = document.f.ü.value-0;
if (document.f.J[0].checked) z = g * 50;
if (document.f.J[1].checked) z = g * 65;
if (document.f.J[2].checked) z = g * 80;
if (document.f.cb.checked) z= z + g*10;
document.f.p.value = z;
}
</script>
</head>
<body >
<form name="f">
<table class=form >
<tr><td class=r><input type="radio" name="J" value=50 onChange="berechne()" checked>  Frühstück <td class=r><input type="checkbox" name="cb" value=10 onChange="berechne()" checked>mit Balkon</td></tr>
<tr><td><input type="radio" name="J" value=65 onChange="berechne()" >  Halbpension</td></tr>
<tr><td><input type="radio" name="J" value=80" onChange="berechne()">  Vollpension</td></tr>
<tr><td class=l>Übernachtungen  <input type="text" size=10 value=1 name= "ü" onChange="berechne()"></td><td class=l>Preis (Euro)  <input type="text" size=10 name="p" readonly></td></tr>
</table>
</form>
</body>
</html>
aber was immernoch nicht klappt, dass beim Ändern der Anzahl der Übernachtungen sich der Preis mitändert ohne das man zusätzlich was drückt, wie mache ich das?
Hallo seos2k!
Bevor Du ultrakurzschreibweisen verwendest, sollte JavaScript bei Dir so gut sitzen, dass Du keine Klammer vergisst und keine runden und geschweifte Klammern durcheinanderbringst.
Deine Kurznamen für Variabalen und Checkboxen sind ziemlich übel, oder willst Du ein Bookmarklet draus machen? ;)
<script language="JavaScript">
es fehtl das zwingend erforderliche type="text/javascript". language ist überholt und kannst Du entsorgen.
function berechne()
^
Fällt Dir was auf?
var g = document.f.ü.value-0;
^
Sind Sonderzeichen hier erlaubt?
var g = document.f.ue.value; // -0 kannst Du Dir sparen, wenn Du 0 abziehst ;)
document.f.p.value = z;
)
^
}
<input type="text" size=10 value=1 name= "ü"
^
<input type="text" size=10 value=1 name= "ue"
Ferner wäre es schön, den Wert vom Preis vorzubelegen, wenn schon beim Laden der Seite »Frühstück« vorgecheckt ist, sollte auch dessen Preis angezeigt werden.
Viele Grüße aus Frankfurt/Main,
Patrick
wie bereits gesagt, habe ich diese probleme selber gelöst
aber was immernoch nicht klappt, dass beim Ändern der Anzahl der Übernachtungen sich der Preis mitändert ohne das man zusätzlich was drückt, wie mache ich das?
ich muss nach dem ändern der Anzahl der Übernachtungen immer zuerst enter betätigen, geht das auch ohne, also während der eingabe?
Hallo seos2k,
wie bereits gesagt, habe ich diese probleme selber gelöst
auch das "ü"?
Das Problem bei onchange ist, das dieses Event bei Text-Inputs erst feuert, wenn der Fokus das Feld verlässt. Du musst also irgendwo anders klicken. Ich habe bei Inputfeldern, die nur ein Zeichen enthalten, mit onkeyup gearbeitet. Bei dir würde das aber bedeuten, wenn jemand das Zimmer für 123 Nächte bucht, sieht er erst den Preis für eine, dann für zwölf und erst dann für 123 Nächte. Entschärfen könntest du dieses, indem du die Berechnung zeitverzögert per setTimeout aufrufst. Ich habe bei einer anderen Anwendung einfach einen Dummybutton mit Text "OK" platziert, denn irgendwo zu klicken ist dem User suspekt.
Gruß, Jürgen
Ü und sso weiter hat keine Probleme gemacht, onkeyup war genau dass, was ich gesucht habe. Danke.