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
You had two problems. The first was you were using
onSelect
instead ofonChange
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==
.Fixed jsFiddle example.