• 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

Hatte Dir ja das ja als Demo bei WP fertig gemacht, entspricht zwar nicht ganz Deinen Anforderungen, ging ja nur ums Prinzip. Aktualisiert sich beides, nur der IE zickt bei onkeyup, also nur mit Enter. Ich könnte Dir das aber nicht mit jQuery umsetzen, weil ich da auch erst einmal einen vollen Tag oder länger probieren müsste, wie was geschrieben wird. Da habe ich selbst noch Lernbedarf:

Javascript Live-Berechnung
 
Ich habs auch ausprobiert. Nur leider bin ich mir nicht so sicher, wie ich das auf meine Anforderungen ummünzen muss?
 
Also ich habe mir noch einmal die Mühe gemacht und alles durchgesehen. Wäre einfacher wenn du ganze (zusammenhängende) Codeschnipsel liefern würdest.

Ich würde das auf 3 Funktionen aufteilen:
calcTotal() erledigt alle Berechnungen unter Berücksichtigung welcher radio-Button gewählt ist und ob ein Rabatt eingetragen ist.
roundDec(value, decimal) rundet den Betrag (value) kaufmännisch auf 2 (decimal) Nachkommastellen
addZeroDec(value, decimal) fügt dem Betrag (value) maximal 2 (decimal) nicht vorhandene Nachkommastellen hinzu

Letztere beide Funktionen werden auf die Summe und die Endsumme angewendet, um ein einheitliches Bild zu erreichen.

In dem document.ready-Block würde ich nur die Funktion calcTotal() referenzieren. Und nach dem erstmaligen Laden der Seite eine erste Berechnung durchführen, da ja bereits einige radio-Button(s) selektiert sind. Und das Rabatt-Feld leeren (Zurück-button im Browser und so) um temporäre Daten zu vermeiden.

Zusammegefasst also so:
Code:
<script>
function roundDec(value, decimal) {
	var factor;

	value = value || 0;
	decimal = decimal || 0;
	factor = Math.pow(10, decimal);

	// Wert an aufrufende Funktion zurückgeben
	return Math.round(value * factor) / factor;
}

function addZeroDec(value, decimal) {
	var i, amount;

	value = value.toString(10) || '0';
	decimal = decimal || 0;

	// Auf ganze Zahl prüfen
	if (value.indexOf('.') === -1) {
		// Ganze Zahl gefunden, Gleitpunkt anhängen
		// und Anzahl der Nullen definieren
		value += '.';
		amount = decimal;
	} else {
		// Gleitpunktzahl (Gleitkommazahl) gefunden
		// Anzahl der Nullen definieren
		amount = decimal - value.split('.')[1].length;
	}

	// Nachkommastellen auffüllen
	for (i = 0; i < amount; i += 1) {
		value += '0';
	}

	// Wert an aufrufende Funktion zurückgeben
	return value;
}

function checkPercent(value) {
	value = value.toString(10) || '0';

	// Auf Format prüfen ###,##% (a) oder ###.##% (b)
	if (value.indexOf(',') !== -1) {
		// Format a gefunden, wandeln in Format b
		value = value.replace(/\./, '').replace(/,/, '.');
	}

	// In Gleitpunktzahl (Gleitkommazahl) umwandeln
	value = parseFloat(value);

	// Auf 100 Prozent Limit prüfen und ggf. begrenzen
	value = Math.ceil(value) > 100 ? 100 : value;

	// Auf 0 Prozent Limit prüfen und ggf. begrenzen
	value = Math.floor(value) < 0 ? 0 : value;

	// Wert an aufrufende Funktion zurückgeben
	return value.toString(10);
}

function calcTotal() {
	// Variablen definieren
	var total, rabatt, ausgabe;

	// Summe aller aktiven radio-Buttons bestimmen
	total = 0;
	$('input:checked').each(function () {
		total += parseFloat($(this).data('price'));
	});

	// Rabatt bestimmen (Standard 0)
	rabatt = checkPercent($('#rabatt').val());

	// Rabatt formatieren ###,## und in Feld schreiben
	$('#rabatt').val(rabatt.replace(/\./, ',').replace(/(?=(\d{3})+\,)/g, ".") + ' %');

	// Rabatt von der Summe aller aktiven radio-Buttons abziehen,
	// mit der Funktion 'roundDec' auf 2 Stellen nach dem Komma runden
	// und Ergebnis als Zeichenkette (String) speichern
	ausgabe = roundDec(total * (1 - rabatt / 100), 2).toString(10);

	// 'ausgabe' auf 2 Nachkommastellen formatieren  und Währungssymbol anhängen
	ausgabe = addZeroDec(ausgabe, 2) + ' €';

	// 'ausgabe' formatieren ##.###,## € und in Feld schreiben
	$('#ausgabe').val(ausgabe.replace(/\./, ',').replace(/(?=(\d{3})+\,)/g, "."));

	// 'total' auf 2 Nachkommastellen formatieren  und Währungssymbol anhängen
	total = addZeroDec(total, 2) + ' €';

	// 'total' formatieren ##.###,## € und in Feld schreiben
	$('#total').val(total.replace(/\./, ',').replace(/(?=(\d{3})+\,)/g, "."));
}


$(document).ready(function () {
	// Alle radio-Buttons registrieren
	$('input:radio').change(calcTotal);
	// Alle Checkboxen registrieren
	$('input:checkbox').change(calcTotal);
	// Rabatt-Feld registrieren
	// Resette alle radio-Buttons und Checkboxen
	$(':radio').each(function (index, element) {
		element.checked = element.defaultChecked;
	});
	$(':checkbox').each(function (index, element) {
		element.checked = element.defaultChecked;
	});
	$('#rabatt').on('keyup', function () {
		var jqInput = $(this);
		if (jqInput.data('key_timeout') !== undefined) {
			clearTimeout(jqInput.data('key_timeout'));
		}
		$(this).data('key_timeout', setTimeout(function () {
			jqInput.data('key_timeout', undefined);
			calcTotal();
		}, 800));
	}).val('');
	// Berechnung für Standardauswahl ausführen
	calcTotal();
});
</script>
 
Zuletzt bearbeitet:
Vielen, vielen Dank! Es funktioniert, wirklich eine großartige Leistung :)
Eine Frage habe ich noch, wenn ich noch Checkboxen hinzufügen möchte, wie müsste ich dies einbauen, dass diese mitberechnet werden?

Ist auch nur noch ein Zusatz, wirklich großartig deine Hilfe! :)
 
Einfach in dem document.ready-Block die Checkboxen registrieren:
Code:
// Alle Checkboxen registrieren
$('input:checkbox').change(calcTotal);
Und dann natürlich auch die Funktion calcTotal() anpassen, wei das ':radio' weg muss:
Code:
// Summe aller aktiven radio-Buttons bestimmen
total = 0;
$('input:checked').each(function () {
	total += parseFloat($(this).data('price'));
});
Ausser natürlich du benötigst eine separate Behandlung der Checkboxen.
 
Gern geschehn

Was mir gerade noch einfällt, man könnte nicht nur den Rabatt zurücksetzen, sondern auch alle radio-Buttons und Checkboxen:
Code:
// Resette alle radio-Buttons und Checkboxen
$(':radio').each(function (index, element) {
	element.checked = element.defaultChecked;
});
$(':checkbox').each(function (index, element) {
	element.checked = element.defaultChecked;
});
Natürlich auch in den document.ready-block
 
danke danke danke :)

- - - Aktualisiert - - -

Ganz vergessen - wie akzeptiert er im Rabattfeld auch ein Komma?
 
Erst einmal eine Verzögerung in der Registrierung des Rabatt-Feldes einbauen:
Code:
$('#rabatt').on('keyup', function () {
	var jqInput = $(this);
	if (jqInput.data('key_timeout') !== undefined) {
		clearTimeout(jqInput.data('key_timeout'));
	}
	$(this).data('key_timeout', setTimeout(function () {
		jqInput.data('key_timeout', undefined);
		calcTotal();
	}, 800));
}).val('');
Somit wird die Funktion calcTotal() 800ms nach dem letzten Tastendruck aufgerufen.

Dann noch eine Hilfsfunktion checkPercent(value), welche nur Werte von 0 bis 100 erlaubt und dann die Funktion calcTotal() anpassen, um das Prozent-Feld zu verarbeiten und formatiert auszugeben:
Code:
// Rabatt bestimmen (Standard 0)
rabatt = checkPercent($('#rabatt').val());

// Rabatt formatieren ###,## und in Feld schreiben
$('#rabatt').val(rabatt.replace(/\./, ',').replace(/(?=(\d{3})+\,)/g, ".") + ' %');

Zur Übersicht habe ich den Code aus Post #23 mal aktualisier.
 
Hey, ich bins wieder. Ich möchte über den Preisfeldern zwei kleine Buttons einbauen, eine mit Euroflagge für Euro und einen Button für die Schweizer SFR, je nach dem soll der Preis in Euro oder SFR berechnet werden. Wie muss ich dies umschreiben, damit es funktioniert?
PS: Bis jetzt wart ihr eine große Hilfe, vorallem @miniA4kuser:)
 
je nach dem soll der Preis in Euro oder SFR berechnet werden.
Wie Du zwei Buttons setzt, weißt Du sicherlich wissen. Für den Rest suche Dir eine API, wo Du den Kurs abfragen kannst. Ein Feed mit aktuellen Kursen sollte ebenfalls genügen. Da es sich um ein geschäftliches Vorhaben zu handeln scheint, wäre es möglicherweise überlegenswert, einen Programmierer zu beauftragen.
 
Ich würde das auf 3 Funktionen aufteilen:
calcTotal() erledigt alle Berechnungen unter Berücksichtigung welcher radio-Button gewählt ist und ob ein Rabatt eingetragen ist.
roundDec(value, decimal) rundet den Betrag (value) kaufmännisch auf 2 (decimal) Nachkommastellen
addZeroDec(value, decimal) fügt dem Betrag (value) maximal 2 (decimal) nicht vorhandene Nachkommastellen hinzu
roundDec() und addZeroDec() sind überflüssig. Dafür gibt es .toFixed() schon im JS-Kern.

Code:
function addZeroDec(value, decimal) {
	var i, amount;

	value = value.toString(10) || '0';
	decimal = decimal || 0;

	// Auf ganze Zahl prüfen
	if (value.indexOf('.') === -1) {
		// Ganze Zahl gefunden, Gleitpunkt anhängen
		// und Anzahl der Nullen definieren
		value += '.';
		amount = decimal;
	} else {
		// Gleitpunktzahl (Gleitkommazahl) gefunden
		// Anzahl der Nullen definieren
		amount = decimal - value.split('.')[1].length;
	}

	// Nachkommastellen auffüllen
	for (i = 0; i < amount; i += 1) {
		value += '0';
	}

	// Wert an aufrufende Funktion zurückgeben
	return value;
}
wenn amount negativ ist, werden die überschüssigen Nachkommastellen nicht entfernt...

Auch würde ich die Eingabe vom Nutzer in das Rabattfeld nicht nachformatieren - ich finde sowas immer etwas nervig. Wenn dann sollte man die Eingabe schon direkt beim Eingeben auf das richtige Format beschränken.

Hey, ich bins wieder. Ich möchte über den Preisfeldern zwei kleine Buttons einbauen, eine mit Euroflagge für Euro und einen Button für die Schweizer SFR, je nach dem soll der Preis in Euro oder SFR berechnet werden. Wie muss ich dies umschreiben, damit es funktioniert?
Willst du die Preise in beiden Währungen fest vorgeben oder mit dem aktuellen Wechselkurs arbeiten.
 
Ich gebe die Preise vor, sind eben feste Preise in € und SFR. Ich habe mir aber eine andere Sache überlegt dazu:

Hinter die beiden Buttons kann ich doch eine onclick-Funktion setzen und den Content dann mit Ajax einmal auf Euro die Berechnung anpassen und dann eben das gleiche für die Schweizer. Sollte doch gehen, oder?

-Edit-
Habe mir mal Ajax angeschaut, doch ich steige nicht ganz durch, wie ich dies machen muss. Kann jemand helfen?
 
Zuletzt bearbeitet:
Das sollte gehen, aber das ist unnötig kompliziert.

Du konntest auch die beiden Preise in data-*-Attributen speichern und dann über deine zwei Buttons kontrollieren, welches der beiden Attribute ausgelesen wird:
Code:
<input type="radio" data-price-eur="10", data-price-sfr="5">

Code:
	var eurPrice = true; // diese Variable musst du über deine beiden Buttons kontrollieren - aber nicht, indem du sie global machst...
	var total = 0;
	$('input:checked').each(function () {
		total += parseFloat($(this).data('price' + (eurPrice? "Eur": "Sfr")));
	});
 
Hi, ich bin's wieder. Ist es möglich, den "data-price=X" für jede Option in einer Excel-Tabelle/extern zu hinterlegen, sodass man sich nicht durch den Code wühlen muss?
 
Natürlich könntest du das auch in einer anderen Datei speichern. Eine Excel-Tabelle ist dafür eher ungeeignet, aber z.B. ein csv-Datei kann man dafür gut verwenden.

ABER ich würde da ja auf der Serverseite sowieso eine DB machen, die deine ganzen Produkte erfasst hält und die HTML-Ausgabe immer aktuell und konsistent erzeugt... und dabei natürlich auch das data-price-Attribut immer aktuell hält.
 
Ich habe einfach eine Tabelle mit den Preisen der Konfigurators in Excel erstellt und diese dann als CSV abgespeichert - keinerlei verbindungen zu den Radio buttons bis jetzt.
 
OK - da musst du zuerst eine logische Verknüpfung erstellen (z.B. die ID oder der Name des Radiobuttons als Spalte im CSV).

Dann holst du dir die CSV-Datei per AJAX vom Server und parst die (entweder du schreibst dir selbst einen Parser oder suchst dir einen im Netz). Dann geht du alle Reihen durch und bevölkerst bei den entsprechenden DOM-Nodes das dataset.
 
Zurück
Oben