zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden jQuery Calculation Rechner Problem... Javascript...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.01.2012, 22:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.01.2012
Beiträge: 3
iDodder befindet sich auf einem aufstrebenden Ast
Standard jQuery Calculation Rechner Problem... Javascript...

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>

Geändert von iDodder (09.01.2012 um 11:00 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.01.2012, 08:03
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.457
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

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.
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.01.2012, 10:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.01.2012
Beiträge: 3
iDodder befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 09.01.2012, 10:55
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.457
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

Zitat:
Zitat von iDodder Beitrag anzeigen
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>
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
  #5 (permalink)  
Alt 09.01.2012, 11:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.01.2012
Beiträge: 3
iDodder befindet sich auf einem aufstrebenden Ast
Standard

Recht herzlichen Dank Scheppertreiber für deine schnelle Hilfe!
Mit Zitat antworten
  #6 (permalink)  
Alt 09.01.2012, 11:51
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.457
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

Gerne geschehen. Wenn ich schonmal einen Fehler finde
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
Antwort

Stichwörter
javascript, jquery calculation, rechner

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:14 Uhr.