CODEWITHSUNDEEP
javascriptjqueryhtmlshopping-cart
chasemb
chasemb

Reputation: 167

jQuery / js - Calculate tax, subtotal and total based on state and quantity select options

I'm new to js/jQuery. Forgive this horrible script. I'm lost.

*(Updated with global variable ifTaxRate as suggested.)*

I'm trying to calculate tax, subtotal, and total based on a customer's selected state and quantity ordered and dynamically display it onscreen.

If a customer is from Idaho, I'm trying to apply a 6% sales tax rate.

Select Options:

 <select id="state" value="<?php echo $_SESSION['sstate'] ?>" name="state" class="required" >
   <option value="">Select State</option>
   <option value="AK">Alaska</option>
   .
   <option value="ID">Idaho</option>
   .
   .
   <option value="WY">Wyoming</option>
</select>

<select id="orderquantity" name="orderquantity">
   <option value="1">1 Bottle (30 Day Supply)</option>
   .
   .
   <option value="8">8 Bottles (240 Day Supply)</option>
</select>

Divs to display info:

<div class="quantityselected"></div>
<div class="productprice"></div>
<div class="pricequantity"></div>
<div class="subtotal"></div>
<div class="tax"></div>
<div class="shipping"></div>
<div class="total"></div>

Really bad js attempt:

<script type="text/javascript">
      var ifTaxRate;
      $(document).ready(function() {
          $("#state").change(function() {
            if ($(this).val() == 'ID') {
              ifTaxRate = .06;
            } else {
              ifTaxRate = 0;
            }
          });
        });

      function doMath() {
            var quant = parseInt(document.getElementById('orderquantity').value);
            //change price here
            var price = 69.99;
            var tax = ifTaxRate;
            //change flat shipping cost here
            var shipping = 4.99;
            var subtotal = quant * price;
            var taxtotal = tax * subtotal;
            var total = subtotal + tax;

            $('.quantityselected').value = quant;
            $('.productprice').value = price;
            $('.pricequantity').value = subtotal;
            $('.tax').value = taxtotal;
            $('.shipping').value = shipping;
            $('.total').value = shipping;
        }
</script>

Upvotes: 0

Views: 3709

Answers (3)

Andr&#233; Al&#231;ada Padez
Andr&#233; Al&#231;ada Padez

Reputation: 11628

one big problem i see here is your iftax variable is declared inside the scope of the anonymous function you pass as a parameter on $('state').change();
You have to declare it as a global variable, and not redeclare it inside said function:

var ifTaxRate = 0; //new    
$(document).ready(function() {
   $("#state").change(function() {
      if ($(this).val() == 'ID') {
         ifTaxRate = .06;
      } else {
         ifTaxRate = 0;
      }
      doMath();//new
   });
   //this way every time you change a select box value, doMath() is called
   $('select').change(doMath);
});

this way, it will be accessible whereever you need it...

update

as for the content not showing in the divs, don't use

$('.quantityselected').value = quant;

it won't work for two different reasons: first: .value = ... (.val(...) in jQuery) is native javascript and won't work in a jQuery object
second: value is a property of input and select controls, with divs you have to set .innerText (.text() in jQuery) and .innerHTML (.html() in jQuery)

use:

$('.quantityselected').html(quant);
...

Upvotes: 1

Steve H.
Steve H.

Reputation: 6947

The variable "iftax" declared in the document ready function is local to that function. The iftax referred to in the doMath function would look at global scope (window.iftax), and I'm guessing that is undefined.

Although using global variables is a bit of an anti-pattern, if you remove the "var" from all the places in the document ready function (where it is currently written "var iftax"), it will default to a global variable and your code should work.

Upvotes: 0

Andrzej Doyle
Andrzej Doyle

Reputation: 103847

Your problem is likely to be one of scope.

Since you're declaring the variable iftax inside the state-change function's closure, it's not visible from your doMath method.

Inside you should declare the variable at the top level, and then merely assign to it from the state-change function:

<script type="text/javascript">
  var iftax;

  $(document).ready(function() {
      $("#state").change(function() {
        if ($(this).val() == 'ID') {
          iftax = .06;
        } else {
          iftax = 0;
        }
      });
    });

    // rest as before

(On a completely different topic, calling the variable ifTaxRate or similar would IMHO be clearer, since at the moment I think it could be confused with the amount of tax due, especially when used ni the same context as price and shipping.)

Upvotes: 0

Related Questions