So I’ve got this nifty little jquery calculator thing and I really need it to return a number so that can be passed on. Right now, it adds fine but Im not able to retrieve the info to pass to the form it belongs to.
The script…
$(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^=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);
}
);
}
);
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_]"),
SF_Billing_GrandTotal: $("[id^=grandTotal]").text.value
},
// 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)
);
SF_Billing_GrandTotal = eval(grandTotal.value);
}
);
}
The table…
<table width="500">
<col style="width: 50px;" />
<col />
<col style="width: 60px;" />
<col style="width: 110px;" />
<tr>
<th>
Qty
</th>
<th align="left">
Product
</th>
<th>
Price
</th>
<th>
Total
</th>
</tr>
<tr>
<td align="center">
<input type="text" name="qty_item_1" id="qty_item_1" value="0" size="2" />
</td>
<td>
Learning jQuery
</td>
<td align="center" id="price_item_1">
$50.00
</td>
<td align="center" id="total_item_1">
$0.00
</td>
</tr>
<tr>
<td align="center">
<input type="text" name="qty_item_2" id="qty_item_2" value="0" size="2" />
</td>
<td>
Framed Award
</td>
<td align="center" id="price_item_2">
$250.00
</td>
<td align="center" id="total_item_2">
$0.00
</td>
</tr>
<tr>
<td></td>
<td>Total Amount :</td>
<td></td>
<td align="center" id="grandTotal" ><input type="hidden" id="SF_Billing_GrandTotal" value="0" /></td>
</tr>
</table>
The plugin can be found at http://www.pengoworks.com/workshop/jquery/calculation/jquery.calculation.js and http://www.pengoworks.com/workshop/jquery/field/jquery.field.js
essentially, I’m trying to populate the hidden input field with the grandTotal value. Any help would be awesome! thanks