CODEWITHSUNDEEP
javascriptjqueryruby-on-rails
Liz
Liz

Reputation: 1437

Jquery Not Updating Value/Variable

I have a piece of somewhat-messy jquery in my app to assign values to the tax, shipping, and total fields of a hidden form before checkout. I have it working mostly, but for some reason if you click "Yes, I live in Colorado" (which will assign a $9ish state tax), the total doesn't get added up properly (the tax isn't added in), even though the tax does get shown.

I added a css-lite snippet that does replicate the problem. Just click "Yes I live in CO", then "See Shipping Options" and "Calculate Total".

$(document).ready(function(){
    var $subtotal = $("#hfSubtotal").val();
    $(".footer").removeClass("top-shadow-inset");
    $(".choiceYesCO").click(function(){
      $(".choice-box").removeClass("active");
      $(".icon-choice").removeClass("ion-ios-checkmark-outline ion-ios-circle-outline")
      $(".choice-no-co").addClass("ion-ios-circle-outline")
      $(".choice-yes-co").addClass("ion-ios-checkmark-outline")
      $(this).addClass("active");
      var $tax = parseFloat($subtotal * .0463).toFixed(2);
      $("#hfTax").val($tax);
      $(".fieldTax").html("Tax: $" + $tax);
    });
    $(".choiceNoCO").click(function(){
      $(".choice-box").removeClass("active");
      $(".icon-choice").removeClass("ion-ios-checkmark-outline ion-ios-circle-outline")
      $(".choice-no-co").addClass("ion-ios-checkmark-outline")
      $(".choice-yes-co").addClass("ion-ios-circle-outline")
      $(this).addClass("active");
      var $tax = parseFloat(0.00).toFixed(2);
      $("#hfTax").val($tax);
      $(".fieldTax").html("Tax: $" + $tax);
    });
    $(".submitTax").click(function(){
      $(".stepTax").addClass("hidden");
      $(".stepShipping").removeClass("hidden");
      $(".fieldTax").removeClass("hidden");
    });
    var $tax = $("#hfTax").val();
    $(".submitShipping").click(function(){
      var $shipping = parseFloat(0.00).toFixed(2);
      $("#hfShipping").val($shipping);
      $(".fieldShipping").html("Shipping: $" + $shipping);
      var $total = parseFloat($subtotal).toFixed(2); + parseFloat($tax).toFixed(2); + parseFloat($shipping).toFixed(2);
      $("#hfTotal").val($total);
      $(".fieldTotal").html("<strong>Total: $" + $total + "</strong>");
      $(".stepShipping").addClass("hidden");
      $(".stepTotal").removeClass("hidden");
      $(".fieldShipping").removeClass("hidden");
      $(".fieldTotal").removeClass("hidden");
    });
    $(".submitTotal").click(function(){
      $(".edit_order").submit();
    });
  });
.btn {
  display: block;
  background-color: red;
  padding: 5px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="stepTax">
        <h3>Do you live in Colorado?</h3>
        <div class="choiceYesCO choice-box"><h4><i class="icon choice-yes-co icon-choice ion-ios-circle-outline"></i>Yes, I live in Colorado.</h4></div>
        <div class="choiceNoCO choice-box"><h4><i class="icon choice-no-co icon-choice ion-ios-circle-outline"></i>No, I don't live in Colorado.</h4></div>
        <div class="btn submitTax">See Shipping Options</div>
      </div>
      <div class="stepShipping hidden">
        <h3>Shipping Options Go Here</h3>
        <p>For now all shipping is free!</p>
        <div class="btn submitShipping">Calculate Total</div>
      </div>
      <div class="stepTotal hidden">
        <h3>You're ready to checkout!</h3>
        <div class="btn submitTotal">Checkout</div>
      </div>
      
      <form novalidate="novalidate" class="simple_form edit_order" id="edit_order_1" enctype="multipart/form-data" action="/orders/1" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="6P1CzQgCx7JVXAJgVi2puDOHX/fJApgUBeFI24TAh+ZWXZ5MmQfpMqGsxcnJl4Z6vwYp8A0MbOer34CJDnv4UQ==" />

        <h4>Subtotal: $200.00</h4>
        <input id="hfSubtotal" type="hidden" value="200.0" name="order[subtotal]" />

        <h4 class="hidden fieldTax"></h4>
        <input id="hfTax" type="hidden" value="9.26" name="order[tax]" />

        <h4 class="hidden fieldShipping">Shipping: $</h4>
        <input id="hfShipping" type="hidden" value="0.0" name="order[shipping]" />

        <h4 class="hidden fieldTotal"><strong>Total: $</strong></h4>
        <input id="hfTotal" type="hidden" value="200.0" name="order[total]" />

</form>

Can anyone see where I'm going wrong here?

Upvotes: 0

Views: 102

Answers (1)

xploshioOn
xploshioOn

Reputation: 4115

the problem that you have here is that you are trying to make the sum with ";" after every value, on the first value, it just brake the line and will always give you 200.00

var $total = parseFloat($subtotal).toFixed(2); + parseFloat($tax).toFixed(2); + parseFloat($shipping).toFixed(2);

just remove those ";" and just let the last one, change it like this

var $total = (parseFloat($subtotal) + parseFloat($tax) + parseFloat($shipping)).toFixed(2);

this will solve the problem.

Upvotes: 2

Related Questions