Javascript Live-Berechnung

lukme

Hallo, ich habe ein Problem mit meinem Formular. Es wird ein Preis aus einer Auswahl von Radiobuttons errechnet mit diesem Skript:

HTML

<input type="Radio" name="Konsolen" id="Schwenk" data-price="940">
Preis [Euro exkl. MwSt.]<br>
<input id="total" type="text" readonly="readonly" value=""/>        
  
        <br>
Ihr Produktrabatt in % <br>
<input type="text" id="rabatt" value="" onkeyup="rechnen();"><br>


        Ihr Preis [Euro exkl. MwSt.]<br> 
<input id="ausgabe" type="text" readonly="readonly" value="" />


    </div>   
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>


var values = {};
$(document).ready(function() {


$('input:radio').change(function(){
    var total = 0.0 ;
    $('input:radio:checked').each(function(){
          total += parseInt($(this).data('price'));
    });
    $('#total').val(total.toFixed(2));
});
 });  
    function rechnen(){
var rabatt = $("#rabatt").val();
var listenpreis = $("#total").val();
var abzug = listenpreis * rabatt / 100;
var xyz = listenpreis - abzug;


       
$("#ausgabe").val(xyz.toLocaleString("de-DE", {style: "currency", currency: "EUR"}));;
    
    }


</script>

Alles anzeigen

In das Rabattfeld soll der User einen Rabatt eintragen und dann soll der endgültige Preis darunter "live" errechnet werden.
Soweit funktioniert auch alles, nur wenn dann nachträglich eine Konfiguration der Radio-buttons geändert wird, ändert sich das Feld mit der ID "total" jedoch nicht ID "ausgabe".

Diese ändert sich erst, wenn man im Rabattfeld "Enter" drückt.
Wie muss ich den Code ändern, damit dies ohne diesen Umweg geschieht und "live" berechnet wird?

Danke im voraus!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Edi

Du kannst bespielsweise den Event onchange="rechnen()" verwenden:

Code

<input type="radio" name="Konsolen" id="Schwenk" data-price="940" [COLOR=#ff0000]onchange="rechnen()"[/COLOR]>
<input type="radio" name="Konsolen" id="Schwenk2" data-price="1000" [COLOR=#ff0000]onchange="rechnen()"[/COLOR]>

lukme

Bei onchange "hängt" das Feld hinterher.. Also jedes mal, wenn ich eine andere Konfiguration mit den Radiobuttons mache, kommt die Summe erst einen Schritt später.

Edi

Hast Du noch andere Skripte auf der Seite laufen?

Und: Ohne URL ist es ziemlich schwierig, ein Skript zu debuggen... ;-)

Melewo

Zitat von lukme

Soweit funktioniert auch alles, nur wenn dann nachträglich eine Konfiguration der Radio-buttons geändert wird, ändert sich das Feld mit der ID "total" jedoch nicht ID "ausgabe".

Bei jQuery blicke ich schlechter durch als bei soliden JavaScript. Somit kann ich mich irren, doch einfach mal die Frage, was für Radio-Buttons?
Ich sehe nur einen und da wird nur geprüft, ob ausgewählt oder nicht und was soll sich da noch ändern, wenn beim ersten Mal checked true und beim zweiten Mal checked true?

Melewo

So wie Edi schrieb wird das in etwa richtig sein, Du musst das Event verarbeiten, wenn Dir checked auf true oder false nichts bringt, eventuell mit

onchange="rechnen(event,this)";

oder

onchange="rechnen(this.value)

um an die Daten zu kommen. Weiß jetzt selbst gerade nicht, wie es richtigt geschrieben wird, denke das letzte war richtig, hatte aber die erste Schreibweise auch schon benutzt.

[COLOR=#ff0000]
[/COLOR]

Melewo

So, damit hättest Du erst einmal immer einen aktuellen Wert von den Radio-Buttons in der globalen var konsole oder wie immer Du die bezeichnen magst und mit diesen Wert kannst Du dann weitere Berechnungen durchführen:

HTML

<!DOCTYPE html>
<html>
<head>
<title>Nur eine Testseite</title>
</head>


<body>
<input type="radio" name="konsolen" id="schwenk1" value="33" onchange="rechnen(this.value)">
<input type="radio" name="konsolen" id="schwenk2" value="44" onchange="rechnen(this.value)">
<input type="radio" name="konsolen" id="schwenk3" value="55" onchange="rechnen(this.value)">
<br>
<input type="text" id="rabatt" value="" onkeyup="berechneSumme(this.value)">


<script type="text/javascript">
"use strict";
var konsole; // globale var konsole


function rechnen(wert) {


    wert = parseInt(wert);
    if (wert > 1) konsole = wert;
    else konsole = 1;


    alert("Ausgabe konsole: "+ konsole);
}
function berechneSumme(rabatt) {


    var wert = konsole;
    var ergb = (rabatt > 1) ? wert * rabatt : "No";


    alert("Ausgabe ergb: "+ ergb);
}
</script>
</body>
</html>

Alles anzeigen

Besser ist es aber, man bindet sich ein 100kB schweres jQuery-Framework für jeden Hasenpup ein, welches man dann nicht versteht.

Melewo

Wenn Du die Eventhandler aus den Input-Elementen heraushaben möchtest, dann geht das mit addEventListener.

Nur die Unterschiede bei den Browsern finde ich jetzt noch etwas merkwürdig. Der FF übernimmt alle Veränderungen, IE und Chrome reagieren bei einer Erhöhung von rabatt erst nach einer Bestätigung, bei einer Verringerung des Wertes jedoch sofort. Da wären noch weitere Tests erforderlich, ob nun onkeyup ideal ist oder ob da vorher noch ein Focus auf das Element gelegt werden sollte.

Das sollte mit jQuery etwas kürzer werden, doch verständlicher ist es halt so für mich. Nun sollte es eigentlich ausreichend sein für einen Anfang.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Nur eine Testseite</title>
</head>


<body>
<div id="user_input">
<input type="radio" name="konsolen" id="schwenk1" value="33">
<input type="radio" name="konsolen" id="schwenk2" value="44">
<input type="radio" name="konsolen" id="schwenk3" value="55">
</div>
<input type="text" id="rabatt" value="">


<div id="ui_ausgeben"></div>
<div id="erg_ausgeben"></div>


<script type="text/javascript">
"use strict";
var konsolen;
var user_input = document.getElementById("user_input");
var kon_radios = document.getElementsByName("konsolen");
var von_rabatt = document.getElementById("rabatt");


if (window.addEventListener) {
    user_input.addEventListener("change", verfolgeKonsolen, false);
    von_rabatt.addEventListener("keyup", berechneSumme, false);
}
else if (window.attachEvent) {
    user_input.attachEvent("onchange", verfolgeKonsolen);
    von_rabatt.attachEvent("onkeyup", berechneSumme);
}


function verfolgeKonsolen() {
    var ui_ausgeben = document.getElementById("ui_ausgeben");


    for (var i = 0; i < kon_radios.length; i++) {


        if (document.getElementsByName("konsolen")[i].checked == true) {
            konsolen = document.getElementsByName("konsolen")[i].value;
            ui_ausgeben.innerHTML = "Anzahl Konsolen: "+ konsolen;


            berechneSumme();
        }
    }
}
function berechneSumme() {


    var erg_ausgeben = document.getElementById("erg_ausgeben");
    var rabatt = (typeof (von_rabatt.value) != "undefined") ? parseInt(von_rabatt.value) : 1;
    var kowert = (typeof (konsolen) != "undefined") ? konsolen : 1;
    var ergebn = (rabatt > 1) ? kowert * rabatt : "No";
    var wel;


    erg_ausgeben.innerHTML = "Ausgabe ergebn: "+ ergebn;
}
</script>
</body>
</html>

Alles anzeigen

Melewo

Mit dem Chrome funktioniert es jetzt auch bei Erhöhungen, der wollte einfach nur noch ein Name-Attribut in:

HTML

<input type="text" name="rabatt" id="rabatt" value="">

Und das onkeyup-Beispiel bei selfhtml funktioniert im IE auch nicht ohne Bestätigung:

http://de.selfhtml.org/javascript/spr…ler.htm#onkeyup

lukme

Vielen Dank für die Mühe, jedoch löst dies mein Problem nicht.

HTML

<div id="streifen"></div>


<style type="text/css">#Konfigurator{
background-color:#fff;


padding: 10px;
}
#streifen {
background: #5a5c68; /* Old browsers */
background: -moz-linear-gradient(top,  #070c2c 1%, #5a5c68  100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#5a5c68), color-stop(100%,#070c2c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #5a5c68 1%,#070c2c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #5a5c68 1%,#070c2c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #5a5c68 1%,#070c2c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #5a5c68 1%,#070c2c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a5c68', endColorstr='#070c2c',GradientType=0 ); /* IE6-9 */


padding-left: 15px;
width: 1150px;
height: 40px;


margin-top: -10px;
opacity: 0.7;


}
input[type="radio"]:checked + label{
    font-weight: bold;
    line-height: 1.3em;
}
span{opacity: 0.7; }
.ruck{ padding-left: 40px;}
</style>




<div id="Konfigurator">








    <div class="ruck">
<input type="Radio" name="welle" id="alu110" data-price="1200" checked="checked" onchange="rechnen(this.value)"/><label>Wickelwelle: Alu, Ø 110mm<span></span></label></li>
<br>
<input type="Radio" name="welle" id="alu154" data-price="1610" onchange="rechnen(this.value)"/><label>


    Wickelwelle: Alu, Ø 154mm


    <span class="preis">+410,00 €</span>


</label>
<br>


<input type="Radio" name="welle" id="edel154" data-price="2400" onchange="rechnen(this.value)"><label>


    Wickelwelle: Edelstahl, Ø 154mm


    <span class="preis">+1.200,00 €</span>


</label>
</div>
<hr>
    <h4>Antrieb</h4>
 <div class="ruck">
<input type="Radio" name="Antrieb" id="Hand" data-price="0" onclick="Ronda();" checked="checked" onchange="rechnen(this.value)" /><label>Handkurbel<span></span></label>
<br>
<input type="Radio" name="Antrieb"id="Motor" data-price="1610" onclick="Ronda();" onchange="rechnen(this.value)" /> <label>


    Elektrisch


    <span class="preis">


         +1.610,00 €


    </span>
    </label>
<br>
<input type="Radio" name="Antrieb" id="Rohr" data-price="2020" onclick="Ronda();" onchange="rechnen(this.value)"/> <label>


    Elektrisch (Rohrmotor Rollfix)


    <span class="preis">


         +2.020,00 €


    </span>


</label>
     </div>
<hr>
    <h4>Konsolen</h4>
 <div class="ruck">
<input type="Radio" name="Konsolen" id="Stat" data-price="0" checked="checked" onclick="Ronda();"/><label>Stationär<span></span></label>
<br>
<input type="Radio" name="Konsolen" id="WL" data-price="-100" onclick="Ronda();" onchange="rechnen(this.value)"/><label  for="WL">


    Mit einseitigem Wandlager


    <span class="preis">


         -100,00 €


    </span>


</label>
<br>
<input type="Radio" name="Konsolen" data-price="640" id="Nut" onclick="Ronda();" onchange="rechnen(this.value)" /> <label>


    Fahrbar auf Schienen


    <span class="preis">


         +640,00 €


    </span>


</label>
<br>
<input type="Radio" name="Konsolen" id="Schwenk" data-price="940" onclick="Ronda();" onchange="rechnen(this.value)"/><label>


    Fahrbar auf Schwenkrollen


    <span class="preis">


         +940,00 €


    </span>


</label></div><hr><br>
Preis [Euro exkl. MwSt.]<br>
<input id="total" type="text" readonly="readonly" value=""/>        
  
        <br>
Ihr Produktrabatt in % <br>
<input type="text" id="rabatt" value="" onkeyup="rechnen();"><br>


        Ihr Preis [Euro exkl. MwSt.]<br> 
<input id="ausgabe" type="text" readonly="readonly" value="" />
</form>
    </div>   
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>


var values = {};
$(document).ready(function() {


$('input:radio').change(function(){
    var total = 0.0 ;
    $('input:radio:checked').each(function(){
          total += parseInt($(this).data('price'));
    });
    $('#total').val(total.toFixed(2));
});
 });  




    function rechnen(){
var rabatt = $("#rabatt").val();
var listenpreis = $("#total").val();
var abzug = listenpreis * rabatt / 100;
var xyz = listenpreis - abzug;


       
$("#ausgabe").val(xyz.toFixed(2)) + "€";
    
    }


</script>

Alles anzeigen

Hat jemand einen Lösungsvorschlag für die Rabattberechnung, welche "live" durchgeführt werden soll?

lukme

Habe es jetzt nur mit Jquery gelöst. Nur das Ausgabefeld akutalisiert sich nicht instant, wenn der Rabatt geändert wird. Wie löse ich dies?

HTML

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>


var values = {};
$(document).ready(function() {


$('input:radio').change(function(){
    var total = 0.0 ;
    $('input:radio:checked').each(function(){
          total += parseInt($(this).data('price'));
    });
    $('#total').val(total.toFixed(2));
});
 


$('input:radio').change(function(){
    var total = 0.0 ;
    var rabatt = $('#rabatt').val();
    $('input:radio:checked').each(function(){
          total += (parseInt($(this).data('price')) - (parseInt($(this).data('price')) * ((rabatt) / 100)));
    });


    $('#ausgabe').val(total.toFixed(2));
});  
 });  


</script>

Alles anzeigen

Melewo

Wie geschrieben, mein Listing feuert beides, bis auf das Problem mit dem IE. Ich verlinke jetzt einmal den anderen Thread von jswelt.de, weil ich da nun eine Antwort geben hatte und es mich selbst interessieren würde, wie eine Umsetzung mit jQuery aussehen würde.

http://forum.jswelt.de/javascript/594…rmularen-2.html

lukme

Problem gelöst. Wen es interessiert - siehe Link von Melewo :)

Melewo

Hätte ich so nicht mit jQuery in kurzer Zeit hinbekommen und alles verstehe ich beim ersten überfliegen auch nicht, weil ich mich zu wenig mit jQuery beschäftige. Werde es mir noch einmal in Ruhe anschauen.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Javascript Live-Berechnung

Jetzt mitmachen!