jQuery Calculation Rechner Problem... Javascript...

iDodder · #1 (**permalink**) 08.01.2012, 22:45

ich kenn mich nicht wirklich mit Javasript aus.... ich brauch für eine Website einen kleinen Rechner der einige Objekte mit Anzahl auswahl zusammen rechnet und die Summe jedes einzelnen und die Gesamtsumme aller Objekte ausgibt und dann noch die Gesamtsumme aller Objekte mit 2,45 Multipliziert.

Ich hab mir dazu jQuery Calculation Plug-in (jQuery Calculation Plug-in) Heruntergeladen und versucht mir den Rechner zu bauen, hat alles geklapt bis auf den letzten Punkt, dass ich nicht weiß wie ich in der Spalte grandTotal2 das Ergebnis aus grandTotal mit 2,45 Multiplizieren kann... ich hoffe das mir jemand helfen kann.

HTML-Code:

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>jQuery Calculation Plug-in</title>

	<!---// load jQuery v1.3.1 from the GoogleAPIs CDN //--->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

	<!--// load jQuery Plug-ins //-->

	<script type="text/javascript" src="http://www.pengoworks.com/workshop/jquery/calculation/jquery.calculation.js"></script>

	<script type="text/javascript">
	var bIsFirebugReady = (!!window.console && !!window.console.log);

	$(document).ready(
		function (){
			// update the plug-in version
			$("#idPluginVersion").text($.Calculation.version);

/*			
			$.Calculation.setDefaults({
				onParseError: function(){
					this.css("backgroundColor", "#cc0000")
				}
				, onParseClear: function (){
					this.css("backgroundColor", "");
				}
			});
*/
			
			// bind the recalc function to the quantity fields
			$("input[name^=qty_item_]").bind("keyup", recalc);
			// run the calculation function now
			recalc();

			// automatically update the "#totalSum" field every time
			// the values are changes via the keyup event
			$("input[name^=sum]").sum("keyup", "#totalSum");
			
			// automatically update the "#totalAvg" field every time
			// the values are changes via the keyup event
			$("input[name^=avg]").avg({
				bind:"keyup"
				, selector: "#totalAvg"
				// if an invalid character is found, change the background color
				, onParseError: function(){
					this.css("backgroundColor", "#cc0000")
				}
				// if the error has been cleared, reset the bgcolor
				, onParseClear: function (){
					this.css("backgroundColor", "");
				}
			});

			// automatically update the "#minNumber" field every time
			// the values are changes via the keyup event
			$("input[name^=min]").min("keyup", "#numberMin");

			// automatically update the "#minNumber" field every time
			// the values are changes via the keyup event
			$("input[name^=max]").max("keyup", {
				selector: "#numberMax"
				, oncalc: function (value, options){
					// you can use this to format the value
					$(options.selector).val(value);
				}
			});

			// this calculates the sum for some text nodes
			$("#idTotalTextSum").click(
				function (){
					// get the sum of the elements
					var sum = $(".textSum").sum();

					// update the total
					$("#totalTextSum").text("$" + sum.toString());
				}
			);

			// this calculates the average for some text nodes
			$("#idTotalTextAvg").click(
				function (){
					// get the average of the elements
					var avg = $(".textAvg").avg();

					// update the total
					$("#totalTextAvg").text(avg.toString());
				}
			);
		}
	);
	

	function recalc(){
		$("[id^=total_item]").calc(
			// the equation to use for the calculation
			"qty * price",
			// define the variables used in the equation, these can be a jQuery object
			{
				qty: $("input[name^=qty_item_]"),
				price: $("[id^=price_item_]")
			},
			// define the formatting callback, the results of the calculation are passed to this function
			function (s){
				// return the number as a dollar amount
				return s.toFixed(2) + "€";
			},
			
			// define the finish callback, this runs after the calculation has been complete
			function ($this){
				// sum the total of the $("[id^=total_item]") selector
				var sum = $this.sum();
				
				$("#grandTotal").text(
					// round the results to 2 digits
					sum.toFixed(2) + "€"
				);
			}
		);					
	}
	</script>

</head>
<body>


<table width="500">
<col style="width: 50px;" />
<col />
<col style="width: 60px;" />
<col style="width: 110px;" />
<tr>
       <th width="15" align="left">
        Anzahl
    </th>
    <th width="140" align="left">
        Produkt
    </th>
    <th width="140" align="right">
        Preis
    </th>
    <th width="180" align="right">
        Preis Total
    </th>
</tr>
<tr>
    <td align="left">
        <input type="text" name="qty_item_1" id="qty_item_1" value="0" size="2" />
    </td>
    <td>
        <a>Stuhl</a>
    </td>
    <td align="right" id="price_item_1">
        19.25 €
    </td>
    <td align="right" id="total_item_1">
        19.25 €
    </td>
</tr>
<tr>
    <td align="left">
        <input type="text" name="qty_item_2" id="qty_item_2" value="0" size="2" />
    </td>
    <td>
        <a>Sofa</a>
    </td>
    <td align="right" id="price_item_2">
        1400.00 €
    </td>
    <td align="right" id="total_item_2">
        1400.00 €
    </td>
</tr>
<tr>
    <td align="left">
        <input type="text" name="qty_item_3" id="qty_item_3" value="0" size="2" />
    </td>
    <td>
        <a>Schrank</a>
    </td>
    <td align="right" id="price_item_3">
        200.25 €
    </td>
    <td align="right" id="total_item_3">
        200.25 €
    </td>
</tr>
<tr>
    <td colspan="3" align="right">
        <strong>Grand Total:</strong>
    </td>
    <td align="right" id="grandTotal">
    </td>
</tr>
<tr>
    <td colspan="3" align="right">
        <strong>Grand Total2:</strong>
    </td>
    <td align="right" id="grandTotal2">
    </td>
</tr>
</table>

</body>
</html>

Scheppertreiber · #2 (**permalink**) 09.01.2012, 08:03

Code:

<script type="text/javascript" src="../field/jquery.field.js"></script>
<script type="text/javascript" src="jquery.calculation.js"></script>

Vor die Aufrufe muß ein "http://" ... Lade Dir mal Firebug, das zeigt Dir an, daß
die Sachen gar nicht geladen werden.

Code:

<script type="text/javascript" src="http://../field/jquery.field.js"></script>
<script type="text/javascript" src="http://jquery.calculation.js"></script>

Natürlich mit der richtigen URL.

iDodder · #3 (**permalink**) 09.01.2012, 10:42

die jquery.calculation.js Datei liegt natürlich mit im Hauptordner deshalb kein http:// ich hab es aber jetzt hier im Forum richtig verlinkt das es auch bei jedem geladen wird.

Hast du ne Idee was mein Hauptproblem angeht?

Scheppertreiber · #4 (**permalink**) 09.01.2012, 10:55

Zitat:

Zitat von iDodder

die jquery.calculation.js Datei liegt natürlich mit im Hauptordner deshalb kein http:// ich hab es aber jetzt hier im Forum richtig verlinkt das es auch bei jedem geladen wird.

Hast du ne Idee was mein Hauptproblem angeht?

Das Teil "grandTotal2" wird ja auch nicht angesprochen. So tut es:
(Änderung in recalc())

Code:

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>jQuery Calculation Plug-in</title>

	<!---// load jQuery v1.3.1 from the GoogleAPIs CDN //--->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

	<!--// load jQuery Plug-ins //-->

	<script type="text/javascript" src="http://www.pengoworks.com/workshop/jquery/calculation/jquery.calculation.js"></script>

	<script type="text/javascript">
	var bIsFirebugReady = (!!window.console && !!window.console.log);

	$(document).ready(
		function (){
			// update the plug-in version
			$("#idPluginVersion").text($.Calculation.version);

/*
			$.Calculation.setDefaults({
				onParseError: function(){
					this.css("backgroundColor", "#cc0000")
				}
				, onParseClear: function (){
					this.css("backgroundColor", "");
				}
			});
*/

			// bind the recalc function to the quantity fields
			$("input[name^=qty_item_]").bind("keyup", recalc);
			// run the calculation function now
			recalc();

			// automatically update the "#totalSum" field every time
			// the values are changes via the keyup event
			$("input[name^=sum]").sum("keyup", "#totalSum");

			// automatically update the "#totalAvg" field every time
			// the values are changes via the keyup event
			$("input[name^=avg]").avg({
				bind:"keyup"
				, selector: "#totalAvg"
				// if an invalid character is found, change the background color
				, onParseError: function(){
					this.css("backgroundColor", "#cc0000")
				}
				// if the error has been cleared, reset the bgcolor
				, onParseClear: function (){
					this.css("backgroundColor", "");
				}
			});

			// automatically update the "#minNumber" field every time
			// the values are changes via the keyup event
			$("input[name^=min]").min("keyup", "#numberMin");

			// automatically update the "#minNumber" field every time
			// the values are changes via the keyup event
			$("input[name^=max]").max("keyup", {
				selector: "#numberMax"
				, oncalc: function (value, options){
					// you can use this to format the value
					$(options.selector).val(value);
				}
			});

			// this calculates the sum for some text nodes
			$("#idTotalTextSum").click(
				function (){
					// get the sum of the elements
					var sum = $(".textSum").sum();

					// update the total
					$("#totalTextSum").text("$" + sum.toString());
				}
			);

			// this calculates the average for some text nodes
			$("#idTotalTextAvg").click(
				function (){
					// get the average of the elements
					var avg = $(".textAvg").avg();

					// update the total
					$("#totalTextAvg").text(avg.toString());
				}
			);
		}
	);


	function recalc(){
		$("[id^=total_item]").calc(
			// the equation to use for the calculation
			"qty * price",
			// define the variables used in the equation, these can be a jQuery object
			{
				qty: $("input[name^=qty_item_]"),
				price: $("[id^=price_item_]")
			},
			// define the formatting callback, the results of the calculation are passed to this function
			function (s){
				// return the number as a dollar amount
				return s.toFixed(2) + "€";
			},

			// define the finish callback, this runs after the calculation has been complete
			function ($this){
				// sum the total of the $("[id^=total_item]") selector
				var sum = $this.sum();

				$("#grandTotal").text(
					// round the results to 2 digits
					sum.toFixed(2) + "€"
				);
				sum *= 2.45;
				$("#grandTotal2").text(
					// round the results to 2 digits
					sum.toFixed(2) + "€"
				);

			}
		);
	}
	</script>

</head>
<body>


<table width="500">
<col style="width: 50px;" />
<col />
<col style="width: 60px;" />
<col style="width: 110px;" />
<tr>
    <th align="left">
        Anzahl
    </th>
    <th align="left">
        Produkt
    </th>
    <th align="right">
        Preis
    </th>
    <th align="right">
        Preis Total
    </th>
</tr>
<tr>
    <td align="left">
        <input type="text" name="qty_item_1" id="qty_item_1" value="0" size="2" />
    </td>
    <td>
        <a>Stuhl</a>
    </td>
    <td align="right" id="price_item_1">
        19.25 €
    </td>
    <td align="right" id="total_item_1">
        19.25 €
    </td>
</tr>
<tr>
    <td align="left">
        <input type="text" name="qty_item_2" id="qty_item_2" value="0" size="2" />
    </td>
    <td>
        <a>Sofa</a>
    </td>
    <td align="right" id="price_item_2">
        1400.00 €
    </td>
    <td align="right" id="total_item_2">
        1400.00 €
    </td>
</tr>
<tr>
    <td align="left">
        <input type="text" name="qty_item_3" id="qty_item_3" value="0" size="2" />
    </td>
    <td>
        <a>Schrank</a>
    </td>
    <td align="right" id="price_item_3">
        200.25 €
    </td>
    <td align="right" id="total_item_3">
        200.25 €
    </td>
</tr>
<tr>
    <td colspan="3" align="right">
        <strong>Grand Total:</strong>
    </td>
    <td align="right" id="grandTotal">
    </td>
</tr>
<tr>
    <td colspan="3" align="right">
        <strong>Grand Total2:</strong>
    </td>
    <td align="right" id="grandTotal2">
    </td>
</tr>
</table>

</body>
</html>

iDodder · #5 (**permalink**) 09.01.2012, 11:32

Recht herzlichen Dank Scheppertreiber für deine schnelle Hilfe!

Scheppertreiber · #6 (**permalink**) 09.01.2012, 11:51

Gerne geschehen. Wenn ich schonmal einen Fehler finde

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Jquery Load Div Problem / Css Style wird nicht erkannt	mastaa	Javascript & Ajax	5	16.03.2011 17:50
Problem mit background-image / javascript im IE	danliker	CSS	3	17.05.2005 21:50
JavaScript PopUp Problem	ShadowDeath	Barrierefreiheit	6	23.03.2005 17:36
Problem: CSS und Javascript	canetti	(X)HTML	1	08.02.2005 10:41
JavaScript document.createElementNS Problem	feelx	(X)HTML	2	22.01.2005 16:22