Berechnung aller inputs

[vincdenic]

Hallo zusammen,
mein erster Beitrag ist leider eine Frage...
Ich versuche ein Konfigurationsprogramm für unsere Firma zu erstellen. Da ich mich mit JS wenig auskenne, und schon seit zwei Tage an dem Problem dran bin, muss ich mal bei den Profis anklopfen.
Es funktioniert wie folgt:
- Es werden verschiedene Produkte aus einer Datenbank gelesen und aufgelistet.
- Jedes Produkt hat ein Verkaufspreis.
- Um die Produkte auszuwählen gibt es entweder Checkboxen oder Radio-Buttons.
- Die Preise der ausgewählten Produkte werden in einer Textbox summiert
- Beim abwählen einer Checkbox wird der Produktpreis subtrahiert, allerdings funktioniert dies bei den Radio-Buttons nicht
Wenn ich in einer Radio-Button-Gruppe ein anderes Radio-Button auswähle, wird der Preis des davor ausgewählten nicht subtrahiert. Es wird immmmer weiter addiert.
Vielleicht fehlt auch eine einfache Zeile, allerdings komme ich aktuell gar nicht drauf was es sein könnte.

So sieht der Code für die Auflistung der Produkte aus:

//Ausgabe der einzelnen Artikel
while($row2 = mysqli_fetch_assoc($res2))
{
echo
"<li>
    <input class=\"artikel\" type=\"".$row2["inputtype"]."\" id=\"produkt\" name=\"".$row2["produktkategorie"]."\" onchange=\"calcPrice(this);\" value=\"".$row2["vk"]."\"/>"
    .$row2["produktname"]." = ".$row2["vk"]." €".
"</li>";
}

Die Funktion calcPrice() sieht so aus: (habe diesen Code in einem Forum gefunden)

    function calcPrice(objCheck)
    {
        //Ermitteln, ob Preis addiert oder subtrahiert werden muss
        dblPreis = (objCheck.checked) ? Number(objCheck.value) : (-1)*Number(objCheck.value);
        // Aktuellen Endpreis in Zahl umwandeln und neuen Preis berechnen
        dblPreis = Number(objCheck.form.txtPreis.value.replace(/,/, ".")) + dblPreis;
        // Neuen Endpreis formatieren und in Textfeld ausgeben
        objCheck.form.txtPreis.value = dblPreis.toFixed(2).replace(/\./, ",");
    }

Sieht jemand von euch, wo das Problem liegt?
Freue mich über jede Hilfe!
Vielen Dank im voraus.

 

[Sempervivum]

Das Problem liegt ganz offenbar darin, dass das onchange-Event nur feuert für den Radiobutton, der geklickt wurde und nicht für den "alten" wo das "checked" verschwindet.
Leider fällt mir keine Lösung ein, um das Problem mit einer Zeile zu lösen. Statt dessen schlage ich vor, den Endpreis nicht durch Addieren oder Subtrahieren zu korrigieren, sondern ihn bei jeder Änderung vollständig neu zu berechnen.

 

[vincdenic]

Das Problem liegt ganz offenbar darin, dass das onchange-Event nur feuert für den Radiobutton, der geklickt wurde und nicht für den "alten" wo das "checked" verschwindet.
Leider fällt mir keine Lösung ein, um das Problem mit einer Zeile zu lösen..

Vielen Dank! Ja vermutlich wird sowas nicht durch eine Zeile Code gelöst

Statt dessen schlage ich vor, den Endpreis nicht durch Addieren oder Subtrahieren zu korrigieren, sondern ihn bei jeder Änderung vollständig neu zu berechnen

Wie sieht dann sowas genau aus? Eine onchange funktion im body?
Daran hatte ich auch gedacht, aber weiss nicht, wie ich das umsetzen soll.

 

[basti1012]

Fals ihr wissen wollt welcher Radio button vorm Wechseln geklickt wahr. Vieleicht hilf euch das weiter

Link zur Lösung

 

[Sempervivum]

So habe ich es mir vorgestellt:

    <form>
        <input type="radio" name="grp1" value="1">Button 1
        <input type="radio" name="grp1" value="2">Button 2
        <input type="checkbox" name="cb1" value="4">Button 2
        <input type="checkbox" name="cb2" value="8">Button 2
        <span id="total"></span>
    </form>
    <script>
        var inputs = document.querySelectorAll("form input");
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].addEventListener("change", function () {
                var total = 0;
                for (var j = 0; j < inputs.length; j++) {
                    if (inputs[j].checked) {
                        total += parseInt(inputs[j].value);
                    }
                }
                document.getElementById("total").textContent = total;
            });
        }
    </script>

Die inline notierten Eventlistener kannst Du dann weg lassen.

 

[vincdenic]

So habe ich es mir vorgestellt:

    <form>
        <input type="radio" name="grp1" value="1">Button 1
        <input type="radio" name="grp1" value="2">Button 2
        <input type="checkbox" name="cb1" value="4">Button 2
        <input type="checkbox" name="cb2" value="8">Button 2
        <span id="total"></span>
    </form>
    <script>
        var inputs = document.querySelectorAll("form input");
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].addEventListener("change", function () {
                var total = 0;
                for (var j = 0; j < inputs.length; j++) {
                    if (inputs[j].checked) {
                        total += parseInt(inputs[j].value);
                    }
                }
                document.getElementById("total").textContent = total;
            });
        }
    </script>

Die inline notierten Eventlistener kannst Du dann weg lassen.

Genial! Funktioniert auch so! Muss es nur noch anpassen wg. der Rundung etc. aber ist super!
Hast mir den Tag gerettet.
Vielen Dank @Sempervivum