Bestell-System: Gesamtpreis onChange vom DropDown neu ausrechnen.

D

DJCueForce

Mitglied
Hallo,

Ich habe folgendes Problem:
Ich programmiere grade in PHP ein Bestellsystem.
Das ganze hat Kategorien:
Slots,
Art
Teststream,
Autostream,

Nun gibts für jede mögliche auswahl in meinem Dropdown einen Preis.
Ich habe gehört, man kann via Ajax oder JavaScript deinen Div-Container neu laden lass onCHange?
Wenn ja, wie geht das? Ich habe mit Ajax und JS noch nicht wirklich was am hut gehabt, PHP ist ehr meine stärke :D

Gruss
Robin
 
Hi,

hier ist ein kleines Beispiel. Willst du den Preis auf dem Client oder auf dem Server neu berechnen?
Wenn du die Kalculation auf dem Server machst, dann schau dir mal die get (http://api.jquery.com/jQuery.get/)/ post(http://api.jquery.com/jQuery.post/)-Funktionen von jQuery an.

Javascript: 
<html>
<head>
<title> de.tutorials.js.dropDown</title>
<meta name="author" content="konstantin.denerz"></meta>

<script src="jquery-1.4.2.js" type="text/javascript">

</script>
<script type="text/javascript">

$(document).ready(function(){
	
	/**
		Changes location and updates parameters in url.
	*/
	function updatePrice(parameters) {
		var result = $("#result");
		result.html("");
		//TODO: RPC / price calculation (client-side)
		var parameterString = "";
		for(parameter in parameters){
			parameterString+=parameter + ":" + parameters[parameter]+"<br>";
			result.html(parameterString);
		}
		
	}
	
	/**
	Collects parameters and updates price.
	*/
	$('select').change(function(eventObject){
		var parameters = {};
		// iterate over selection tags
		$("#config select").each(function(index,select){
			var key = $(select).attr("id");
			var value = select[select.selectedIndex].value;
			parameters[key] = value;
		});
		
		updatePrice(parameters);
		
	});
});
</script>
</head>
<body>
<form id="config">
<select id="Cat1">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<select id="Cat2">
<option>P1</option>
<option>P2</option>
<option>P3</option>
</select>
</form>
<div id="result"></div>
</body>
</html>

Gruß Konstantin
 
Zuletzt bearbeitet von einem Moderator:
Wie kommst du an den Preis, der einer der Kombination möglicher Kategorieeinträgen zugeordnet ist?
Hast du einen php-File, dass den Preis anhand der HTTP-Request-Parameter (da könnten deine Einträge aus den DropDown-Boxen drin sein) ermittelt (SERVER)? oder hast du die Preis-Informationen schon in der gleichen PHP-Datei, wie die DropDown-Boxen generiert werden? (CLIENT)

Kannst es ja so machen: Je nach Komplexität der Preiskalkulation, nach jeder "Neuauswahl" auf dem Client (Browser) den Preis auf deinem Webserver neuberechnen, indem du die PHP-Datei (z.B. calculatePrice.php) aufrufst (http://api.jquery.com/jQuery.post/). Diese könnte ein JSON mit dem Ergebnis deiner Kalkulation generieren.
 
An den gesamtpreis komme ich noch garnicht.
Den habe ich bis jetzt immer nur nach "Auswahl Bestellen" in einer neune GET Sektion im PHP zusammen rechnen lassen
also hier mal als code:
PHP: 
<form id="form1" name="form1" method="post" action="">
  Slots:
  <select name="slots" id="teststream">
    <option value="8,00">25 Slot - 8,00 Euro</option>
    <option value="12,00">50 Slot - 12,00 Euro</option>
    <option value="18,00">75 Slot - 18,00 Euro</option>
  </select>
  <br />
Art:
<select name="art" id="teststream">
  <option value="0,00">Audio - 0,00 Euro</option>
  <option value="10,00">Video - 10,00 Euro</option>
</select>
<br />
Teststream:
<select name="teststream" id="teststream">
  <option value="0,00">5 Slot - 0,00 Euro</option>
  <option value="1,00">10 Slot - 1,00 Euro</option>
</select>
<br />
<br />
<label>
  <input type="submit" name="button" id="button" value="Senden" />
</label>
</form>
<br />
<?php
$slots = $_POST["slots"];
$art = $_POST["art"];
$test = $_POST["teststream"];
	$preis = $slots+$art+$test;
	echo $preis;
?>


So lief es bisland, nur ich will das ausrechnen nicht extra die ganze zeit refreschen sondern nur den Preis.


Gruss
Robin
 
Ah, verstehe. Wenn du die Werte in den Option-Tags hinterlegst, dann kannst du diese einfach zusammen rechnen. Schau dir die updatePrice-Funktion an:
Javascript: 
<html>
<head>
<title> de.tutorials.js.dropDown</title>
<meta name="author" content="konstantin.denerz"></meta>

<script src="jquery-1.4.2.js" type="text/javascript">

</script>
<script type="text/javascript">

$(document).ready(function(){
	
	/**
		Calculates new price from given parameteres.
	*/
	function updatePrice(parameters) {
		var result = $("#result");
		result.html("");
		var price = 0.0;
		for(parameter in parameters){
			var value = parameters[parameter];
			price += new Number(value);
			result.html(price);
		}
		
	}
	
	/**
	Collects parameters and updates price.
	*/
	$('select').change(function(eventObject){
		var parameters = {};
		// iterate over selection tags
		$("#config select").each(function(index,select){
			var key = $(select).attr("id");
			var value = select[select.selectedIndex].value;
			parameters[key] = value;
		});
		
		updatePrice(parameters);
		
	});
});
</script>
</head>
<body>
<form id="config">
<select id="Cat1">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<select id="Cat2">
<option value="4">P1</option>
<option value="5">P2</option>
<option value="6">P3</option>
</select>
</form>
<div id="result"></div>
</body>
</html>

Gruß Konstantin
 
Zuletzt bearbeitet von einem Moderator:
Vielen dank, das Prinzip so funktioniert super.
2 fragen habe ich noch.

1: Kann man den Gesamtpreis von vorneherrein aufrufen lassen? Also bis jetzt is es ja so, dass er den nur anzeigt wenn man das erste mal einen change macht.

2: Kann man das so einstellen, dass er mit kommar rechnen kann? Weil bei kommar ging es nicht. Da karm nur NaN zurück. Desweiteren were es noch gut wenn er nur 2 stellen nach dem Kommar anzeigen würde geht sowas auch?

Hochachtungsvoll
Robin
 
zu 1: ja, den Gesamtpreis kriegst du, wenn du innerhalb jedes Select-Tags eine default-Option bestimmst. (Zeile: 47)
zu 2: price.toFixed(2), damit kannst du denn Preis auf 2 Stellen ausgeben. (Zeile: 33)


Javascript: 
<html>
<head>
<title> de.tutorials.js.dropDown</title>
<meta name="author" content="konstantin.denerz"></meta>

<script src="jquery-1.4.2.js" type="text/javascript">

</script>
<script type="text/javascript">

$(document).ready(function(){
	
	/**
	*	Calculates new price
	*/
	function updatePrice() {
	
		var parameters = {};
		
		// iterate over selection tags
		$("#config select").each(function(index,select){
			var key = $(select).attr("id");
			var value = select[select.selectedIndex].value;
			parameters[key] = value;
		});
		
		var result = $("#result");
		result.html("");
		var price = 0.0;
		for(parameter in parameters){
			var value = parameters[parameter];
			price += new Number(value);
			result.html(price.toFixed(2));
		}
		
	}
	
	/**
	Collects parameters and updates price.
	*/
	$('select').change(function(eventObject){
		updatePrice();
	});
	
	
	// calculates default price
	updatePrice();
});
</script>
</head>
<body>
<form id="config">
<select id="Cat1">
<option value="1.1" >A</option>
<option value="2.2">B</option>
<option value="3.3" selected="selected">C</option>
</select>
<select id="Cat2">
<option value="4.4">P1</option>
<option value="5.5">P2</option>
<option value="6.6" selected="selected">P3</option>
</select>
</form>
<div id="result"></div>
</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Vielen dank.

Wie schaut das mit dem Komma anstad des Punktes aus? Kann man sowas auch beeinflussen?
Ansonsten funktioniert es so wie es soll. Vielen lieben dank!

Hochachtungsvoll
Robin
 
result.html(price.toFixed(2).replace('.',',')); // z.B. 1,99

toFixed liefert einen String. Zum Rechnen verwendest du Number (Klasse). Wenn du Daten / Preise anzeigen willst, dann kannst du diese über einen Formatter nach der jeweiligen Locale formatieren.

Gruß Konstantin
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück