title: Adding Tax Calculation to jQuery Calculation Plug-in
body: <p>I am using the extremely useful jQuery Calulation plugin found here, </p>
  
  <p><a href="http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm" rel="nofollow">http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm</a></p>
  
  <p>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. </p>
  
  <p>So far I have this script,</p>
  
  <pre><code>&lt;script type="text/javascript" src="/uploads/JS/jquery.calculation.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;    
      var bIsFirebugReady = (!!window.console &amp;&amp; !!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)    
                  );    
              }    
          );    
      }    
  &lt;/script&gt;
  </code></pre>
  
  <p>And this is a snippet of the HTML,</p>
  
  <pre><code>&lt;tr&gt;    
  &lt;td valign="middle" align="center" style="width: 15%;"&gt;    
  &lt;select class="cms_dropdown" id="t5" name="cntnt01fbrp__914"&gt;    
  &lt;option value="(none)"&gt;(none)&lt;/option&gt;
  &lt;option value="tasks"&gt;Tasks&lt;/option&gt;
  &lt;option value="resources"&gt;Resources&lt;/option&gt;
  &lt;option value="expenses"&gt;Expenses&lt;/option&gt;
  &lt;option value="other"&gt;Other&lt;/option&gt;
  &lt;/select&gt;    
  &lt;/td&gt;   
  &lt;td class="quote_textarea" valign="middle" align="center"&gt;    
  &lt;textarea cols="80" rows="10" class="cms_textarea" id="d5" name="cntnt01fbrp__915"&gt;    
  Shower Riser Budget    
  &lt;/textarea&gt;    
  &lt;/td&gt;    
  &lt;td valign="middle" align="center" style="width: 10%;"&gt;   
  &lt;input type="text" value="1" size="25" maxlength="80"   id="q5" name="cntnt01fbrp__916"&gt;    
  &lt;/td&gt;    
  &lt;td valign="middle" align="center" style="width: 10%;"&gt;    
  &lt;input type="text" value="€27.00" size="25" maxlength="80"   id="p5" name="cntnt01fbrp__917"&gt;    
  &lt;/td&gt;    
  &lt;td valign="middle" align="center" style="width: 10%" id="total_item_5"&gt;&lt;/td&gt;    
  &lt;/tr&gt;
  
  &lt;tr&gt;  
  &lt;td valign="middle" align="center" style="width: 15%;"&gt;   
  &lt;select class="cms_dropdown" id="t6" name="cntnt01fbrp__918"&gt;    
  &lt;option value="(none)"&gt;(none)&lt;/option&gt;    
  &lt;option value="tasks"&gt;Tasks&lt;/option&gt;    
  &lt;option value="resources"&gt;Resources&lt;/option&gt;    
  &lt;option value="expenses"&gt;Expenses&lt;/option&gt;    
  &lt;option value="other"&gt;Other&lt;/option&gt;   
  &lt;/select&gt;    
  &lt;/td&gt;   
  &lt;td class="quote_textarea" valign="middle" align="center"&gt;    
  &lt;textarea cols="80" rows="10" class="cms_textarea" id="d6" name="cntnt01fbrp__919"&gt;    
  Expenses    
  &lt;/textarea&gt;   
  &lt;/td&gt;    
  &lt;td valign="middle" align="center" style="width: 10%;"&gt;    
  &lt;input type="text" value="1" size="25" maxlength="80"   id="q6" name="cntnt01fbrp__920"&gt;    
  &lt;/td&gt;    
  &lt;td valign="middle" align="center" style="width: 10%;"&gt;    
  &lt;input type="text" value="€20.00" size="25" maxlength="80"   id="p6" name="cntnt01fbrp__921"&gt;   
  &lt;/td&gt;    
  &lt;td valign="middle" align="center" style="width: 10%" id="total_item_6"&gt;&lt;/td&gt;  
  &lt;/tr&gt;
  
  &lt;tr&gt;   
  &lt;td colspan="4" align="right"&gt;Subtotal &lt;/td&gt;    
  &lt;td valign="middle" align="center"&gt;&lt;input type="text" name="cntnt01fbrp__1104" value="0.00" size="25" maxlength="80" id="myTotal" /&gt;&lt;/td&gt;    
  &lt;/tr&gt;             
  
  &lt;tr class="tax"&gt;  
  &lt;td colspan="4" align="right"&gt;Tax (19.6%)&lt;/td&gt;        
  &lt;td valign="middle" align="center"&gt;&lt;input type="text" name="cntnt01fbrp__1105" value="0.00" size="25" maxlength="80" id="tax"/&gt;&lt;/td&gt;   
  &lt;/tr&gt;
  
  &lt;tr&gt;    
  &lt;td colspan="4" align="right"&gt;&lt;b&gt;Total&lt;/b&gt;&lt;/td&gt;    
  &lt;td valign="middle" align="center"&gt;&lt;input type="text" name="cntnt01fbrp__1106" value="0.00" size="25" maxlength="80" id="total" /&gt;&lt;/td&gt;    
  &lt;/tr&gt;
  </code></pre>
  
  <p>If anyone is able to help it would be very much appreciated.</p>
  
  <p>Many Thanks</p>
  
  <p>Chris</p>