将税金计算添加到jQuery Calculation插件 [英] Adding Tax Calculation to jQuery Calculation Plug-in

问题描述

我正在使用此处找到的极为有用的jQuery Calulation插件

I am using the extremely useful jQuery Calulation plugin found here,

http://www.pengoworks.com/workshop/jquery/计算/calculation.plugin.htm

我正在使用它来计算报价形式的行项目总计和子总计.我可以使用它，以便它计算各个订单项和小计.我的下一个要求是添加税额，最后添加总计.这就是我的jQuery功能结束的地方.我尝试了一些尝试，但最终一切都失败了.税额是固定的，因此我要做的是将小计并使用该小计来计算税额，然后将税额添加到小计中以创建总计.

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>

这是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.

非常感谢

克里斯

推荐答案

更改HTML的税款部分:

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) + "";
    }

如果获得NaN结果，请从脚本和输入值中删除€"号.

If you get a NaN result, remove "€" sign from the script and from the input values.

这篇关于将税金计算添加到jQuery Calculation插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！