onSelect tax calculations

Question

My work is only required to charge California State residents sales tax when they make a purchase. I wrote what I hoped would be a javascript function that will apply sales tax when the customer selects California from a drop down list of states. I gave each state a value of 'else' and california a value or 'CA'. My code calculates the sales tax as 0 everytime, causing tax to never be applied to the grand total when "CA" is selected. I am using onSelect=UpdateCost() for my state list, and onChange=UpdateCost() when check boxes of products are checked. What part of my code is preventing the tax from properly calculating?

 function UpdateCost() {
   var stotal = 0;
   var ttotal = 0;
   var gtotal = 0;
   var tax = .0825;
   var gn, elem;
     for (i=0; i<12; i++) {
       gn = 'manual'+i;
       elem = document.getElementById(gn);
     if (elem.checked == true) { stotal += Number(elem.value); }
}
   var state = document.getElementById('state');
   var selection = state.options[state.selectedIndex].value;
 if (selection = 'CA') { ttotal += tax * stotal; }
 if (selection = 'else') {ttotal = 0;}
 if(!isNaN(ttotal)) {
    var calitax = ttotal.toFixed(2);
    document.getElementById('taxtotal').value = calitax;
    document.getElementById('subtotal').value = stotal.toFixed(2);
    }
   var gtotal = ttotal + stotal;
     if(!isNaN(gtotal)) {
   var grand = gtotal.toFixed(2);
   document.getElementById('grandtotal').value = grand;}

   }

And here is the relevant form code that has been simplified (as simple as I could get it anyway):

//in the header of course.
<script type="text/javascript" src="orderform.js"></script>

<form action=""  method="post">
<fieldset>
State: <select name="state" id="state" onSelect="UpdateCost()">
<option value="else" id="else">AL</option>
<option value="else" id="else">AK</option>
<option value="else" id="else">AZ</option>
<option value="else" id="else">AR</option>
<option value="CA" id="CA">CA</option>
</select>
<p>Select the manuals to order</p>

<input name="manual" type="checkbox" id='manual6' onclick="UpdateCost()" value="185">manual 1<br />
<input name="manual" type="checkbox" id='manual0' onclick="UpdateCost()" value="220">manual 2<br /><br />

<input name="manual" type="checkbox" id='manual7' onclick="UpdateCost()" value="155">manual 3<br />
<input name="manual" type="checkbox" id='manual1' onclick="UpdateCost()" value="185">manual 4<br /><br />

<h3>**SAVE $50** WHEN YOU BUY BOTH</h3><br />
<input name="manual" type="checkbox" id='manual8' onclick="UpdateCost()" value="290">manual 5<br />
Or:<br />
<input name="manual" type="checkbox" id='manual2' onclick="UpdateCost()" value="355">manual 6<br /><br />
<hr>
<input name="manual" type="checkbox" id='manual9' onclick="UpdateCost()" value="190">manual 7<br />
<input name="manual" type="checkbox" id='manual3' onclick="UpdateCost()" value="225">manual 8<br /><br />

<input name="manual" type="checkbox" id='manual10' onclick="UpdateCost()" value="125">manual 9<br />
<input name="manual" type="checkbox" id='manual4' onclick="UpdateCost()" value="150">manual 10<br /><br />
<h3>**SAVE $50** WHEN YOU BUY BOTH</h3><br />
<input name="manual" type="checkbox" id='manual11' onclick="UpdateCost()" value="265">11<br />
Or:<br />
<input name="manual" type="checkbox" id='manual5' onclick="UpdateCost()" value="325">12<br /><br />

Subtotal: <input name="subtotal" type="text" id="subtotal" value=""><br />
California Resident Tax: <input name="taxtotal" type="text" id="taxtotal" value=""><br />
Total: <input name="grandtotal" type="text" id="grandtotal" value=""><br />

</fieldset>

Sorry for the length!!! Thank you for the help :D

Why not open the debugger and have the browser tell you, rather than one of us? (F12 = IE, Ctrl-Shift-I = Chrome, FF, Opera) — enhzflep, Apr 10 '13 at 19:03
I'm super new to Javascript, and I have been working on this for days. I'm self taught, so I am trial and error-ing my way through creating this function. If I could figure it out on my own I wouldn't have signed up for a stackoverflow account and posted here >. — user2267371, Apr 10 '13 at 19:18
Can't argue with "wouldn't have signed up for a SO account and posted here > <" :-) _BUT_ I will point out that the question should include a minimal (but complete!) code snippet that demonstrates the problem. It's really a bit hard to see things working without seeing the data too.. — enhzflep, Apr 10 '13 at 19:27
Also, just opened the debugger for Chrome and it isn't indicating any issues with my code, so I would image that its not that my code is "wrong" but that I am not using the correct code/order to calculate the sales tax. I just don't know what the correct line of code would be :/ I can add a snippit of the form that it is tied to — user2267371, Apr 10 '13 at 19:30
Bugger! The debugger also has single-step and breakpoints available. You can single-step through each line of the function and examine the value of any/all variables within it. This may help isolate the problem. But yes, a copy of the html it processes would aid in providing a solution. :-) — enhzflep, Apr 10 '13 at 20:13
I know that is a crap ton of html, and I'm really sorry. I took out most of the states and all other unnecessary crap to try to get it as minimal as possible while preserving the integrity of what I created. Thank you for your help enhzflep :D I really appreciate it! — user2267371, Apr 10 '13 at 20:37
Problem #1, `onSelect="UpdateCost()"` should be `onChange="UpdateCost()"` — j08691, Apr 10 '13 at 20:38

score 0 · Answer 1 · answered Apr 10 '13 at 20:53

You had two problems. The first was you were using onSelect instead of onChange in the state select field. The bigger issue however was in the function where you were checking the state. You were using an assignment = instead of a comparison ==.

if (selection == 'CA') {    
    ttotal += tax * stotal;
}
if (selection == 'else') {
    ttotal = 0;
}

Fixed jsFiddle example.

onSelect tax calculations

1 Answers1