• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Berechnungen und Ausgaben in Formularen

L

lukme

New member
Hallo, ich habe mit Hilfe des Forums in den letzten Tagen einen Preisrechner mit Radiobuttons zusammen gecodet. Ich habe trotzdem eine Frage:
Wie formatiere ich die Ausgabe meines Ergebnisses in "Euro-Standart"? Z.b. "1.200,00 €"

Meine momentane Ausgabe ist numerisch "1200.00". Habt ihr eine Lösung für das Problem?
Code: 
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
var values = {}; 


$('input:radio').change(function(){
    var total = 0.00;
    $('input:radio:checked').each(function(){
          total += parseFloat($(this).data('price'));
    });
    $('#total').val(total.toFixed(2));
    
});
</script>
HTML: 
<input id="total" type="text" readonly="readonly" value=""/>
Das ist mein Feld, wo die Ausgabe des Ergebnisses erfolgt.
Den Buttons ansich habe ich den Preis folgendermaßen zugewiesen:
HTML: 
<input type="Radio" name="Konsolen" id="Schwenk" data-price="940">

Ich hoffe ihr könnt mir helfen, die Ausgabe adäquat zu gestalten.

Danke
 
Zuletzt bearbeitet von einem Moderator:
Javascript Textfeld auslesen + dividieren

Hallo, ich schreibe momentan einen Preiskonfigurator. Dort wählt der Kunde die Optionen via Radiobuttons aus und somit errechnet sich ein Preis.
HTML: 
<input type="Radio" name="Konsolen" id="Schwenk" data-price="940">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
var values = {}; 


$('input:radio').change(function(){
    var total = 0.00;
    $('input:radio:checked').each(function(){
          total += parseFloat($(this).data('price'));
    });
    $('#total').val(total.toFixed(2));
    
});
</script>
<input id="total" type="text" readonly="readonly" value=""/>
Natürlich mit mehr Radiobuttons und mehr optionen im orginal ( nur zur veranschaulichung). Nun soll der Kunde noch in einem Textfeld seinen Rabatt in % eingeben und dann soll der Endpreis darunter als "live-calculation" errechnet werden.
HTML: 
Ihr Produktrabatt in % <br><input type="text" value="0.00"><br>

        Ihr Preis [Euro exkl. MwSt.]<br> <input type="text" value="" readonly="readonly">
Kann mir jemand bei dem Problem helfen? Ich hänge dort leider.

Danke schonmal :)
 
Der Inhalt der Variable "total" muss entsprechen umgeformt werden, bevor mittels jQuery dem Textfeld übergeben wird.

Jedoch Vorsicht mit dem .toFixed(2), das rundet je nach verwendetem Browser nicht ganz präzise, siehe hier

Und weiter geht es hier und hier
 
miniA4kuser schrieb:
Jedoch Vorsicht mit dem .toFixed(2), das rundet je nach verwendetem Browser nicht ganz präzise, siehe hier
Zum Vergrößern anklicken....
die scheinen intern unterschiedliche rundungsmodi zu verwenden. üblicher ist eigentlich das verhalten des FF (Round to the Nearest Value) => 2.695 = 2.694999999999999840127884453977458178997039794921875
der IE verwendet vermutlich Round toward Positive Infinity => 2.695 = 2.69500000000000028421709430404007434844970703125
 
Da Preise berechnet werden sollen, ist das nicht das Problem mit dem Runden :) Könnt ihr mir helfen, wie ich das entsprechend coden muss mit dem dividieren?
 
Das steht in meinem 2. Beitrag. Aus der Berechnung des Feldes "total" soll noch ein Produktrabatt abgezogen werden, welchen der Kunde selbst eingibt. In einem Feld darunter soll dann der Endpreis stehen.
Also "total-(Produktrabatt/100)=Endpreis". Kann mir jemand helfen?
 
Vorsicht bei Geld und Fließkommazahlen. Da können gerne mal unerwartete Ergebnisse rauskommen und die Leute sind da empfindlich. Deswegen sollte man immer mit Ganzzahlen (also in Cent) rechnen. Da treten die Probleme nicht auf.

Die Ausgabe und der Rabatt sind jetzt nicht wirklich kompliziert.

Du holst dir zuerst die Werte aus dem HTML und dann kannst du sie so verrechnen/formatieren:
Code: 
var total = 12345678909876543;
var rabatt = 30;

var preis = Math.round(total * (1 - rabatt / 100));
var ausgabe = preis.toString(10).replace(/^(\d)$/, "00$1").replace(/^(\d{2})$/, "0$1").replace(/(\d{2})$/, ",$1").replace(/(?=(\d{3})+\,)/g, ".");
alert(ausgabe);
 
HTML: 
Preis [Euro exkl. MwSt.]<br>
<input id="total" type="text" readonly="readonly" value="" onChange="rechnen();"/>        
  
        <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 = {}; // index to store the selection from each named group of radio's
$(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));
});
 });  

</script>

<script>
    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>
 
Zuletzt bearbeitet:
Hab' ich doch oben schon gezeigt, wie man das so formatieren kann...

PS: warum jagst du listenpreis zwei mal durch parseFloat()? und abzug ist sowieso schon eine Zahl - musst du auch nicht durch parseFloat jagen.
PPS: Warum verwendest du inline-Eventlistener, wenn du sowieso schon jQuery am Start hast und das damit viel sauberer machen kannst?
PPPS: Für was ist die globale (tztztz) Variable values gut? Ist auch wirklich kein guter Name für eine globale Variable...
 
So, habe das nach deinen Vorschlägen korrigiert. Ich habe nur noch ein Problem. Wenn sich der Wert in "total" ändert, muss ich erst im "rabatt" feld erneut enter drücken, bevor er mir den aktualisierten gesamtpreis ausgibt. wie kann ich das mit meinem vorhandenen skript umsetzen?

Dankeee
 
Ohne diesen Thread mitverfolgt zu haben: das dürfte gehen, indem du einfach ein onkeyup statt einem onchange setzt.
PS: Zeig doch mal bitte noch zum Schluss dein aktualisiertes Skript!
 
Zuletzt bearbeitet:
Julian schrieb:
PS: Zeig doch mal bitte noch zum Schluss dein aktualisiertes Skript!
Zum Vergrößern anklicken....
Hier:
HTML: 
 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));
});
 });  

</script>

<script>
    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>
Btw mit onkeyup funktioniert es auch nicht. Wenn man einen anderen Radiobutton anwählt, ändert sich der Preis in ID "total" jedoch nicht ID"ausgabe" also der Endpreis abzüglich des Rabatts.
 
Du musst natürlich in dem change-Event der <input type="radio"> auch die Funktion rechnen() aufrufen.

PS: Bist du sicher, dass du niemals andere Radiobuttons auf der Seite haben wirst?
PPS: Du solltest das parseFloat nicht komplett entfernen, sondern nur dort, wo es nötig ist. Also bei der Zuweisung an rabatt und and listenpreis.
PPPS: mit den .toLocaleString() wäre ich vorsichtig. So verhalten sich die IE Versionen unterschiedlich. Die Parameter werden erst vom IE11 interpretiert. Und auch im FF ist es erst seit dem 29er drin. Und Safari kann es anscheinend gar nicht. Aber warum verwendest du da den Code von mir nicht? Der funktioniert in jedem Browser.
 
Ich habe den toLocaleString() auch wieder raus genommen, da ich das mit den Problemen auch erst später gelesen habe. Soweit so gut, mit onchange="rechnen();" erscheint im Ausgabefeld immer der falsche Wert, also das Feld hängt immer einen Schritt zurück, wenn im oberen Feld 1200,- steht, und ich einen anderen Button wähle, kommt dann im Ausgabefeld erst die 1200,- Wie fixe ich das?
 
Du sollst das auch nicht in einen inline-Eventlistener packen, sondern in den Listener, den du schon hast. Also nach der Summenberechnung.
 
HTML: 
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));
});  
 });
Ich habe es jetzt nur mit Jquery gelöst - nur das Feld Ausgabe aktualisiert sich nicht direkt, wenn ein anderer Rabatt eingegeben wird. Wie setze ich das um?
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben