treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Editable Invoice --including tax to total

• Good day all:

I know the area concerning my topic maybe old, but I hope that some can provide some assistance.

I have modified the editable invoice to calculate taxes based on a percentatge of the subtotal; however, I need some help incorporating tax amount to the total. The tax is an option, initiated on check box selection. the code for the function update_total() is:
``function update_total(){//function update_total() {	var total = 0;	\$('.price').each(function(i){   price = \$(this).html().replace("\$","");    if (!isNaN(price)) total += Number(price);      });total =roundNumber(total,2);  \$('#subtotal').html("\$"+total);    \$('#total').html("\$"+total);  update_balance();}``

my code for the sales tax is:
``var taxRate = 0.0575;function doMath(){   var tax = 0;  if (\$("#taxbox").attr('checked')) {     var subtotal = Number(\$("#subtotal").text().replace(/\\$/, ""));     tax = subtotal  * taxRate;         }  \$("#tax").val("\$" + tax.toFixed(2));}``

I believe the code for new total should be something like this:
``var total = parseFloat(\$("#subtotal").html().replace("\$","")) + parseFloat(\$("#tax").val().replace("\$",""));// still attempting to define a new total variable with this code``

Can I get any assistance in making this work? I have tried numerious strategies, but none seem to work.

Again, I need some help incorporating these two codes, thus enabling my total box to include the tax amount if the check box is selected.
• where did you get this from?
• I got the form from here. It is called editable invoice I have modified it so that I can have sales tax option as well as retrieving data from db. My issues is that I need to have the taxes added to the total. But I am unable achieve this task. Also, I think I may have posted the question in the wrong section. I believe this is a js question. Any thoughts on any of this?
• Edit by jfreehill @ 9:39PM: Confusing post
• Forget that last post, I should've looked at what you were actually using. Sorry about any confusion caused. All you need to do is add a bit to update_total and a small event checker for the checkbox. Below is the code you should actually use:
``function update_total() {  var total = 0, tax = 0, taxRate = 0.0575;    \$('.price').each(function(i){    price = \$(this).html().replace("\$","");    if (!isNaN(price)) total += Number(price);  });  total = roundNumber(total,2);  \$('#subtotal').html("\$"+total);    //will change value of total only if taxbox is checked, otherwise   //it will subtract tax from the total, which defaults to 0  if(\$('#taxbox:checked')) {   	tax = total * taxRate;  	total += roundNumber(tax,2);  } else {   	total -= tax;  }  \$('#total').html("\$"+total);    update_balance();}``

Then, towards the bottom of the script where all the other event handlers are inside the document ready function, put this:
``  \$('#taxbox').change(function(){  	update_total();  });``

Hopefully that works correctly. You may want to add a box the html to show what the tax is or note the addition of taxes just so anybody else seeing it isn't confused.
• jfreehill, thank you so much for your post and time in assiting me to resolve my issue. As I was studing you suggestions and reading several articles on google, I decided to re structure the function. Here's what I have come up with --which thus far is providing the desired outcomes. I'm still trying to work out some other issues. I'll post final code once completed.

``var taxRate = 0.0575;function update() {	var subtotal = 0;	\$('.price').each(function(i) {		price = \$(this).html().fromCurrency();		if (!isNaN(price)) subtotal += price;	});	\$('#subtotal').html(subtotal.toCurrency());	//doMath	var tax = (\$('#taxbox').click(update)) ? (subtotal * taxRate) : 0;	\$('#tax').val(tax.toCurrency());	var total = subtotal + tax;	\$('#total').html(total.toCurrency());	//update_balance	var due = total - \$('#paid').val().fromCurrency();	\$('.due').html(due.toCurrency());}function update_price() {//This could also be migrated into update	var row = \$(this).parents('.item-row');	var price = row.find('.cost').val().fromCurrency() * Number(row.find('.qty').val());	isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html(price.toCurrency());	update();}function bind() {	\$('.cost').blur(update_price);	\$('.cost').keyup(update_price);//added	\$('.qty').blur(update_price);	\$('.qty').keyup(update_price);//added}``

Again, I thank you very much for your time and thoughts.
Mossa
• Glad to help, although did you see that I cleared the older post added a new post of what it should be? It's based on minimum change to the original script Chris made.
• Yes, I have seen your latter post and have made a note of it just in case I have to revert to it. I like the new that I'm working on because the calculations are performed live as the amounts are typed.

On a related note: On, completion, I would like to make this revised invoice available here so that others may benefit from it --as I know the issue of sales taxes has been asked on this forum before. I had send Chris a message concerning this as well, but he never replied. My modified form has enbedded in it some php scripts to pull customer --name, address and other information from db. Any ideas, on how this can happen?