I am using the extremely useful jQuery Calulation plugin found here,
http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm
I am using it to calculate the line item totals and sub totals of a quote form. I have it working so that it calculates the individual line items and the sub-total. My next requirement though is to add the Tax amount and finally the Grand Total. This is where my jQuery capabilities have come to an end. I have tried a few things but just end up breaking everything. The tax amount is fixed so what I need to to do is take the sub-total and use that to calculate the tax amount with and then add the tax amount to the sub total to create the grand total.
So far I have this script,
<script type="text/javascript" src="/uploads/JS/jquery.calculation.min.js"></script>
<script type="text/javascript">
var bIsFirebugReady = (!!window.console && !!window.console.log);
$(document).ready(
function (){
// bind the recalc function to the quantity fields
$("input[id^=q]").bind("keyup", recalc);
$("input[id^=p]").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");
// 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[id^=q]"),
price: $("input[id^=p]")
},
// 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();
$("#myTotal").val(
// round the results to 2 digits
"€" + sum.toFixed(2)
);
}
);
}
</script>
And this is a snippet of the HTML,
<tr>
<td valign="middle" align="center" style="width: 15%;">
<select class="cms_dropdown" id="t5" name="cntnt01fbrp__914">
<option value="(none)">(none)</option>
<option value="tasks">Tasks</option>
<option value="resources">Resources</option>
<option value="expenses">Expenses</option>
<option value="other">Other</option>
</select>
</td>
<td class="quote_textarea" valign="middle" align="center">
<textarea cols="80" rows="10" class="cms_textarea" id="d5" name="cntnt01fbrp__915">
Shower Riser Budget
</textarea>
</td>
<td valign="middle" align="center" style="width: 10%;">
<input type="text" value="1" size="25" maxlength="80" id="q5" name="cntnt01fbrp__916">
</td>
<td valign="middle" align="center" style="width: 10%;">
<input type="text" value="€27.00" size="25" maxlength="80" id="p5" name="cntnt01fbrp__917">
</td>
<td valign="middle" align="center" style="width: 10%" id="total_item_5"></td>
</tr>
<tr>
<td valign="middle" align="center" style="width: 15%;">
<select class="cms_dropdown" id="t6" name="cntnt01fbrp__918">
<option value="(none)">(none)</option>
<option value="tasks">Tasks</option>
<option value="resources">Resources</option>
<option value="expenses">Expenses</option>
<option value="other">Other</option>
</select>
</td>
<td class="quote_textarea" valign="middle" align="center">
<textarea cols="80" rows="10" class="cms_textarea" id="d6" name="cntnt01fbrp__919">
Expenses
</textarea>
</td>
<td valign="middle" align="center" style="width: 10%;">
<input type="text" value="1" size="25" maxlength="80" id="q6" name="cntnt01fbrp__920">
</td>
<td valign="middle" align="center" style="width: 10%;">
<input type="text" value="€20.00" size="25" maxlength="80" id="p6" name="cntnt01fbrp__921">
</td>
<td valign="middle" align="center" style="width: 10%" id="total_item_6"></td>
</tr>
<tr>
<td colspan="4" align="right">Subtotal </td>
<td valign="middle" align="center"><input type="text" name="cntnt01fbrp__1104" value="0.00" size="25" maxlength="80" id="myTotal" /></td>
</tr>
<tr class="tax">
<td colspan="4" align="right">Tax (19.6%)</td>
<td valign="middle" align="center"><input type="text" name="cntnt01fbrp__1105" value="0.00" size="25" maxlength="80" id="tax"/></td>
</tr>
<tr>
<td colspan="4" align="right"><b>Total</b></td>
<td valign="middle" align="center"><input type="text" name="cntnt01fbrp__1106" value="0.00" size="25" maxlength="80" id="total" /></td>
</tr>
If anyone is able to help it would be very much appreciated.
Many Thanks
Chris
Change the tax part of the HTML:
<tr class="tax">
<td colspan="4" align="right">Tax (19.6%)</td>
<td valign="middle" align="center">
<input type="hidden" name="cntnt01fbrp__1105" value="19.6" size="25" maxlength="80"
id="tax" />
<input type="text" id="taxAmount" name="taxAmount" size="25">
</td>
</tr>
<tr>
<td></td>
<td colspan="3" align="right"><button type="button" onclick="Compute();">Get Total</button>
</td>
<td valign="middle" align="center">
<input type="text" name="cntnt01fbrp__1106" value="0.00" size="25" maxlength="80"
id="newTotal" />
</td>
</tr>
and add this function to the script:
function Compute() {
var Total = document.getElementById("myTotal").value;
var Tax = document.getElementById("tax").value;
var NewTotal = document.getElementById("newTotal");
var TaxAmount = document.getElementById("taxAmount");
Total = parseFloat(Total);
Tax = parseFloat(Tax);
TaxAmount.value = Math.max((Total * Tax) / 100).toFixed(2) + ""
NewTotal.value = Math.max(Total + (Total * Tax) / 100).toFixed(2) + "";
}
If you get a NaN result, remove "€" sign from the script and from the input values.
来源：https://stackoverflow.com/questions/10693670/adding-tax-calculation-to-jquery-calculation-plug-in