Jump to content

jQuery Calculation Plug-in grand total to hidden input


Presto-X

Recommended Posts

Hello everyone,

 

I'm using the jQuery calculation plug-in found here: http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm

 

I have the form working great, it's displaying the grand total in a span tag, this works for our needs but I also need it to add the total to a hidden input field for our payment gateway checkout.  I do not know enough javascript to get it working, I'm more of a php guy  ;D any help you could give would be great, thanks everyone.

 

Here is our input code:

<input type="hidden" name="total" value="0.00" id="myTotal" />

 

Here is our javascript:

var bIsFirebugReady = (!!window.console && !!window.console.log);

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

		// 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)
			);
		}
	);		
}

Link to comment
Share on other sites

I got it working by adding the following:

$("#myTotal").val(
// round the results to 2 digits
"$" + sum.toFixed(2)
);

 

So my final code looks like this, hope this helps someone else:

var bIsFirebugReady = (!!window.console && !!window.console.log);

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

		// 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)
			);

			$("#myTotal").val(
				// round the results to 2 digits
				"$" + sum.toFixed(2)
			);

		}
	);
}

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.