Bei ausgwählten Checkboxen automatisch Gesamtpreis aktualisieren

Stefan · 06.01.2009

Ich möchte unser Bestellformular ein wenig verbessern:

Anstatt ein Auswahlfeld sollen für jedes Produkt eine Checkbox angehakt werden. Sobald man ein Produkt oder mehrere anhakt, soll der Gesamtpreis automatisch angezeigt werden. Wie könnte man das machen? Gibt es irgendwo Beispiele im Netz? Müsste ja ein einfaches Javascript reichen oder?

Top_Gun · 06.01.2009

AW: Bei ausgwählten Chechboxen automatisch Gesamtpreis aktualisieren

Soll der Gesamtpreis live nach anhaken der Checkboxen zu sehen sein? <--- Dann wäre AJAX die Möglichkeit
Oder reicht der Gesamtpreis nach abschicken des Formulars? <--- Dann würde PHP reichen

Stefan · 06.01.2009

AW: Bei ausgwählten Chechboxen automatisch Gesamtpreis aktualisieren

Ja es sollte live angezeigt werden. Darum wohl Javascript/Ajax. Beispiel?

Top_Gun · 06.01.2009

AW: Bei ausgwählten Chechboxen automatisch Gesamtpreis aktualisieren

Ne sry in AJAX bin ich noch nicht so bewandert...

cebito · 06.01.2009

AW: Bei ausgwählten Checkboxen automatisch Gesamtpreis aktualisieren

Du könntest über eine for-Schleife den Status von check(1) bis check(irgendwas) dauernd abfragen und dann den Preis aktualisieren. Vielleicht nicht das beste, aber mein erster Gedanke.

Stefan · 06.01.2009

AW: Bei ausgwählten Checkboxen automatisch Gesamtpreis aktualisieren

hast du ein kleines beispiel für mich?

cebito · 06.01.2009

AW: Bei ausgwählten Checkboxen automatisch Gesamtpreis aktualisieren

Stefan schrieb:
hast du ein kleines beispiel für mich?

mach grad eins... dauert noch ein wenig

Top_Gun · 06.01.2009

AW: Bei ausgwählten Checkboxen automatisch Gesamtpreis aktualisieren

Ähm ich weiß ja nicht viel aber gibt es nicht so ein Event onChange? Damit geht es einfacher als mit ner Dauerschleife...

EDIT: Joar gibt es:

HTML:

<input type="checkbox" name="Preis1" value="12,95" onchange="JS()"> CD PSD was auch immer - 12,95 EUR

Fehlt halt nur das JS zum Preisberechnen...

EDIT 2: Quellen:

EDIT 3: Hab hier was gefunden, dass diesem Thema sehr nahe kommt:

cebito · 06.01.2009

AW: Bei ausgwählten Checkboxen automatisch Gesamtpreis aktualisieren

Danke Top_Gun, hätt ich auch selber draufkommen können :kopfpatsch: Im Prinzip sollte es so funktionieren

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PSD-Bestellformular</title>

<script language="JavaScript">
<!--
function aktualisieren(boxid) {
    var gespreis=1*document.getElementById('preis').value;
    if (document.getElementById(boxid).checked) {
        gespreis+=1*document.getElementById(boxid).value;
    }
    else {
        gespreis-=1*document.getElementById(boxid).value;
    }
    document.getElementById('preis').value=gespreis;
}
-->
</script>

</head>

<body>

<form>
    <p><input name="dvd1" id="check1" type="checkbox" value="29.95" onchange="aktualisieren(this.id)" /> DVD1 - 29.95</p>
    <p><input name="dvd2" id="check2" type="checkbox" value="21.95" onchange="aktualisieren(this.id)" /> DVD2 - 21.95</p>
    <p><input name="dvd3" id="check3" type="checkbox" value="9.95" onchange="aktualisieren(this.id)" /> DVD3 - 9.95</p>
    <p><input name="dvd4" id="check4" type="checkbox" value="12.95" onchange="aktualisieren(this.id)" /> DVD4 - 12.95</p>
    <p><input name="dvd5" id="check5" type="checkbox" value="79.95" onchange="aktualisieren(this.id)" /> DVD5 - 79.95</p>
    <p><input name="dvd6" id="check6" type="checkbox" value="29.95" onchange="aktualisieren(this.id)" /> DVD6 - 29.95</p>
    <p><input name="dvd7" id="check7" type="checkbox" value="49.95" onchange="aktualisieren(this.id)" /> DVD7 - 49.95</p>
    <p><input name="dvd8" id="check8" type="checkbox" value="29.95" onchange="aktualisieren(this.id)" /> DVD8 - 29.95</p>
    <p><input name="gesamtpreis" id="preis" type="text" value="0.00" /> &euro;</p>
</form>

</body>
</html>

Ist aber noch irgendwie ein Bug beim rechnen drin und ich seh den Wald vor lauter Bäumen nicht mehr, denn ab und zu passiert das:

Ich blick es halt grad nicht mehr, vielleicht findet ja jemand was...

Top_Gun · 06.01.2009

AW: Bei ausgwählten Checkboxen automatisch Gesamtpreis aktualisieren

Ähm, kannst du mir mal das Script erklären?

Normalerweise zählst du doch alle gechekten Boxen zusammen und machst nicht so ein Wirrwarr mit + und - je... Also schreib doch mal um á la:

Code:

funktion() {
  preis = 0;
  foreach checkbox {
    if (checkbox.checked) {
      preis = preis + checkbox.value;
    }
  }
  set textfeld = preis;
}

cebito · 06.01.2009

AW: Bei ausgwählten Checkboxen automatisch Gesamtpreis aktualisieren

Top_Gun schrieb:
Ähm, kannst du mir mal das Script erklären?

Ist gecheckt -> addieren, sonst -> subtrahieren

Top_Gun schrieb:
Normalerweise zählst du doch alle gechekten Boxen zusammen und machst nicht so ein Wirrwarr mit + und - je... Also schreib doch mal um á la:

Code:

funktion() { preis = 0; foreach checkbox { if (checkbox.checked) { preis = preis + checkbox.value; } } set textfeld = preis; }

Das würde jetzt nix ändern, weil du ja trotzdem mit denselben Werten rechnest und da irgendwo liegt der Fehler

Top_Gun · 06.01.2009

AW: Bei ausgwählten Checkboxen automatisch Gesamtpreis aktualisieren

cebito schrieb:
Das würde jetzt nix ändern, weil du ja trotzdem mit denselben Werten rechnest und da irgendwo liegt der Fehler

Öhm, ich finde, dass meine Möglichkeit für den User leichter verständlich und zugänglicher ist...

Und ich persönlich traue bei Berechnungen diesen verkürzten Schreibweisen += und -= nicht. Das mag ne persönliche ähm Eigenart sein, aber das wäre das erste wo ich den Fehler suchen würde ^^
Außerdem verstehe ich nicht so ganz warum du den zu addierenden Wert mit 1 multiplizierst... es sei denn das wäre ein Cast- oder Boxing, dann könnte auch dort ein Fehler sein...

EDIT: Und du berechnest den neuen Preis aufgrund des alten Wertes den du erst da rein geschrieben hast. Auch dies kann ein Fehler sein, wenn irgendwo in deiner Rechnung ein minimaler Fehler ist, fällt dieser bei den ersten 10 Klicks nicht auf, jedoch bei allen nachfolgenden. Daher würde ich, so wie in meiner Lösung die Rechnung immer wieder bei 0,- beginnen...

cebito · 06.01.2009

AW: Bei ausgwählten Checkboxen automatisch Gesamtpreis aktualisieren

Top_Gun schrieb:
Außerdem verstehe ich nicht so ganz warum du den zu addierenden Wert mit 1 multiplizierst... es sei denn das wäre ein Cast- oder Boxing, dann könnte auch dort ein Fehler sein...

Das multiplizieren mit 1 hat den zweck, daß er es als zahl erkennt und nicht als String hinten dranhängt, sonst würde bei:

Code:

gespreis+=document.getElementById(boxid).value;

bspw. sowas rauskommen 0.0029.95

Top_Gun schrieb:
EDIT: Und du berechnest den neuen Preis aufgrund des alten Wertes den du erst da rein geschrieben hast. Auch dies kann ein Fehler sein, wenn irgendwo in deiner Rechnung ein minimaler Fehler ist, fällt dieser bei den ersten 10 Klicks nicht auf, jedoch bei allen nachfolgenden. Daher würde ich, so wie in meiner Lösung die Rechnung immer wieder bei 0,- beginnen...

Das lustige ist, daß er beim anklicken der nächsten Box normal weiterrechnet und eigentlich ist auch dieses Ergebnis (siehe Bild) bis zur 2. Kommastelle richtig. Ich weiß halt nicht, wo er den Rest herholt.

Edit: achja, die "normale" lange schreibweise bringt dieselben Ergebnisse

cebito · 06.01.2009

AW: Bei ausgwählten Checkboxen automatisch Gesamtpreis aktualisieren

So, hab es jetzt mal so gemacht, daß er jedesmal alle neu zusammenrechnet

Code:

<script language="JavaScript">
<!--
function aktualisieren() {
    var gespreis=0;
    for (var i = 1; i <= 8; i++) {
        if (document.getElementById(i).checked) {
            gespreis+=1*document.getElementById(i).value;
        }
    }
    document.getElementById('preis').value=gespreis;
}
-->
</script>

leider kommen trotzdem diese Ergebnisse wie oben. Ich bin mit meinem Latein am Ende...

Top_Gun · 06.01.2009

AW: Bei ausgwählten Checkboxen automatisch Gesamtpreis aktualisieren

Top_Gun schrieb:
Außerdem verstehe ich nicht so ganz warum du den zu addierenden Wert mit 1 multiplizierst... es sei denn das wäre ein Cast- oder Boxing, dann könnte auch dort ein Fehler sein...

cebito schrieb:
Das multiplizieren mit 1 hat den zweck, daß er es als zahl erkennt und nicht als String hinten dranhängt, sonst würde bei:

Code:

gespreis+=document.getElementById(boxid).value;

bspw. sowas rauskommen 0.0029.95

Also wird der Datentyp geboxt... kann man das nicht vernünftig casten?

cebito schrieb:
So, hab es jetzt mal so gemacht, daß er jedesmal alle neu zusammenrechnet

Code:

<script language="JavaScript">  </script>

leider kommen trotzdem diese Ergebnisse wie oben. Ich bin mit meinem Latein am Ende...

Die einzige Fehlerquelle die ich (wo ich ja so grandios viel Ahnung von JS habe

) noch sehe, da wir ja schon einige ausgeschlossen haben, ist halt das Boxing bzw die Zeile mit der Multiplikation. Ich gehe davon aus, dass die Datentypen nicht 100%ig stimmen und daher ein Rundungsfehler auftritt.
Also Datentyp richtig casten und dann addieren...

Alternativ kannst du ja mal testen, ob wir mal über 0,4444444444... kommen, wenn nicht könnte man auf 2 Nachkommastellen runden und den Fehler untern Teppich kehren...

cebito · 06.01.2009

AW: Bei ausgwählten Checkboxen automatisch Gesamtpreis aktualisieren

Das war 'ne schwere Geburt, bin ja auch nich so der jscript-Profi

Hab noch parseInt() und parseFloat() entdeckt um in Integer bzw Gleitkommazahl umzuwandeln. Damit geht's dann so...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PSD-Bestellformular</title>

<script language="JavaScript">
<!--
function aktualisieren() {
    var gespreis = 0;
    var wert = 0;
    for (var i = 1; i <= 8; i++) {
        if (document.getElementById(i).checked) {
            wert = parseFloat(document.getElementById(i).value);
            wert = wert*100;
            gespreis += parseInt(wert);
        }
    }
    gespreis = parseFloat(gespreis);
    gespreis = gespreis/100;
    document.getElementById('preis').value = gespreis;
}
-->
</script>

</head>

<body>

<form>
    <p><input name="dvd1" id="1" type="checkbox" value="29.951E0" onchange="aktualisieren()" /> DVD1 - 29.95</p>
    <p><input name="dvd2" id="2" type="checkbox" value="21.951E0" onchange="aktualisieren()" /> DVD2 - 21.95</p>
    <p><input name="dvd3" id="3" type="checkbox" value="9.951E0" onchange="aktualisieren()" /> DVD3 - 9.95</p>
    <p><input name="dvd4" id="4" type="checkbox" value="12.951E0" onchange="aktualisieren()" /> DVD4 - 12.95</p>
    <p><input name="dvd5" id="5" type="checkbox" value="79.951E0" onchange="aktualisieren()" /> DVD5 - 79.95</p>
    <p><input name="dvd6" id="6" type="checkbox" value="29.951E0" onchange="aktualisieren()" /> DVD6 - 29.95</p>
    <p><input name="dvd7" id="7" type="checkbox" value="49.951E0" onchange="aktualisieren()" /> DVD7 - 49.95</p>
    <p><input name="dvd8" id="8" type="checkbox" value="29.951E0" onchange="aktualisieren()" /> DVD8 - 29.95</p>
    <p><input name="gesamtpreis" id="preis" type="text" value="0.00" readonly="readonly" /> &euro;</p>
</form>

</body>
</html>

Edit: doch überlistet - mit Preis dritte Nachkommastelle 1 funzt es auch mit dem runden

Vorher hatte er z.B. 9.95*100 = 994.9999999999999 ausgegeben, keine Ahnung warum?

Top_Gun · 06.01.2009

AW: Bei ausgwählten Checkboxen automatisch Gesamtpreis aktualisieren

Na wir nähern uns sicherlich...

Ein paar Sachen sind mir aufgefallen:

- gespreis hat keinen Datentyp (oder ist var schon einer?) diesen sollte man auch auf float setzen
- wenn du zu gespreis lediglich float addierst (und gespreis evtl auch schon float ist) brauchst du nach der Berechnung die ganzen Umwandlungen nicht mehr
- im Allgemeinen verstehe ich nciht warum du den gespreis mal hundert, zu integer zurück zu float konvertierst und durch hundert dividierst... das ist irgendwie im Kreis gelaufen und bringt gar keinen Sinn... nicht mal wegen der Nachkommastellen...
- kann unser Inputfeld "gesamtpreis" überhaupt einen float-Typ als Value bekommen oder muss da nen anderen Datentyp übergeben werden?

cebito · 06.01.2009

AW: Bei ausgwählten Checkboxen automatisch Gesamtpreis aktualisieren

War zwar ein bissl umständlich, aber ich hatte mir jetzt nach jeder Zeile mit alert() die werte ausgeben lassen. Da ist mir dann aufgefallen, wo der Fehler war. Warum jscript nicht richtig rechnen kann ist mir aber immer noch rätselhaft.
Das mit *100 und dann Integer ist, damit alles hinterm Komma abgeschnitten wird. dann wieder Float (Kommastellen zulassen) und wieder /100. Die einzige Möglichkeit, die ich für jscript gefunden hab um auf 2 Nachkommastellen zu kommen.

Top_Gun · 06.01.2009

AW: Bei ausgwählten Checkboxen automatisch Gesamtpreis aktualisieren

cebito schrieb:
War zwar ein bissl umständlich, aber ich hatte mir jetzt nach jeder Zeile mit alert() die werte ausgeben lassen. Da ist mir dann aufgefallen, wo der Fehler war. Warum jscript nicht richtig rechnen kann ist mir aber immer noch rätselhaft.

Wo ist denn nun der Fehler? ^^

cebito schrieb:
Das mit *100 und dann Integer ist, damit alles hinterm Komma abgeschnitten wird. dann wieder Float (Kommastellen zulassen) und wieder /100. Die einzige Möglichkeit, die ich für jscript gefunden hab um auf 2 Nachkommastellen zu kommen.

Achso logisch, mit dem Fehler kommst du ja auf mehr als 2 Nachkomma stellen... wollte gerade sagen, dass man ein solches Umwandeln ja gar nicht braucht wenn wir nur addieren ^^

cebito · 06.01.2009

AW: Bei ausgwählten Checkboxen automatisch Gesamtpreis aktualisieren

Top_Gun schrieb:
Wo ist denn nun der Fehler? ^^

Er hatte einfach an einer Stelle aus 9.95: 9.949999999999999 gemacht und dann damit weitergerechnet. Warum das so ist weiß ich selbst nicht :schmoll:
Dadurch bin ich dann halt auf die Idee mit der dritten Nachkommastelle im value-Wert gekommen...