Sum input and return values in div with JavaScript and jQuery

Question

I'm trying to return the sum of input values in real time, but it just adds up the whole value and doesn't add up the cents. I would like to add the cents too, what can I do?

Currently, the script returns something like: 100.00
But it was supposed to return: 100.85

I think it's a simple thing to solve, but I'm new to JavaScript.

Here is my code:

$('.cardAccordion').on("change", function() {
  var lts = $(this).find("#lts").val();
  var fuelPrice = $(this).find("#fuelPrice").val();
  var calc = lts * fuelPrice;
  var sum = calc.toLocaleString("pt-BR", {
    style: "currency",
    currency: "BRL"
  });
  
  $(this).find("#ltsValue").val(calc)

  
})


var res = 0.00;

$('#addToCart').click(function() {
  var val = $(this).parents('.cardAccordion').find('#ltsValue').val();

  if(val == 0){
    $("#lts").css({
      borderColor: "#f27474"
    })
  }else{
    
    var qnt = $(this).parents('.fuelCard').find('#qntField').val();

    $(this).parents('.cardAccordion').find('#ltsValue').each(function () {
      res += ~~$(this).val() * qnt;
    });

    var sum = res.toLocaleString("pt-BR", {
      style: "currency",
      currency: "BRL"
    });

    $("[name=result]").val(res);
    $("h3[name=resultText]").text(sum)
  }
})

<div class="card fuelCard">
    <input type="number" value="1" id="qntField" name="quantity" class="form-control  quantityField" disabled>
    <div class="cardAccordion">
        <input type="hidden" value="6.39" id="fuelPrice" />
        <label>Litros</label>
        <select class="form-control" id="lts">
                      <option value="0">Selecione</option>
                      <option value="5">5 Lts</option>
                      <option value="10">10 Lts</option>
                      <option value="15">15 Lts</option>
                      <option value="20">20 Lts</option>
                    </select>
                    <input type="text" class="form-control" id="ltsValue" value="0" disable />
        <button class="btn" id="addToCart">Adicionar ao carrinho</button>
        <input type="hidden" value="0.00" name="result" />
            <h3 name="resultText">R$ 0,00</h3>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

~~ converts a value to its integral value. Use + or plain old parseFloat to parse numbers. — Heretic Monkey
– Heretic Monkey, Commented Oct 16, 2021 at 0:01

Neeraj · Accepted Answer · 2021-10-16 09:17:17Z

0

Integer arithmetic rounds down. Use parseFloat instead. I done some changes to your code here is the working demo.

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
  <div class="card fuelCard">
    <input type="number" value="1" id="qntField" name="quantity" class="form-control  quantityField" disabled>
    <div class="cardAccordion">
        <input type="hidden" value="6.39" id="fuelPrice" />
        <label>Litros</label>
        <select class="form-control" id="lts">
                      <option value="0">Selecione</option>
                      <option value="5">5 Lts</option>
                      <option value="10">10 Lts</option>
                      <option value="15">15 Lts</option>
                      <option value="20">20 Lts</option>
                    </select>
                    <input type="text" class="form-control" id="ltsValue" value="0" disable />
        <button class="btn" id="addToCart">Adicionar ao carrinho</button>
        <input type="hidden" value="0.00" name="result" />
            <h3 name="resultText">R$ 0,00</h3>
    </div>
</div>
<script>
 $('.cardAccordion').on("change", function() {
  var lts = $(this).find("#lts").val();
  var fuelPrice = $(this).find("#fuelPrice").val();
  var calc = lts * fuelPrice;
  var sum = calc.toLocaleString("pt-BR", {
    style: "currency",
    currency: "BRL"
  });
  
  $(this).find("#ltsValue").val(calc)

  
})


var res = 0.00;

$('#addToCart').click(function() {
  var val = $(this).parents('.cardAccordion').find('#ltsValue').val();

  if(val == 0){
    $("#lts").css({
      borderColor: "#f27474"
    })
  }else{
    
    var qnt = $(this).parents('.fuelCard').find('#qntField').val();

    $(this).parents('.cardAccordion').find('#ltsValue').each(function () {
      res +=  parseFloat($(this).val()) * qnt;
    });

    var sum = res.toLocaleString("pt-BR", {
      style: "currency",
      currency: "BRL"
    });

    $("[name=result]").val(parseFloat(res));
    $("h3[name=resultText]").text(sum)
  }
})
</script>
</body>
</html>

answered Oct 16, 2021 at 9:17

Neeraj

7646 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jhonata Bonadio Over a year ago

It works perfectly. But at a certain point, when subtracted, the value has a "-" in front of it. Like this: -$0.00. How can I remove this?

Neeraj Over a year ago

when you subtracted values goes in minus that's why it shows "-".

Neeraj Over a year ago

still, you want to remove minus sign when subtracting replace res += parseFloat($(this).val()) * qnt; this with res -= parseFloat($(this).val()) * qnt * -1; this

Jhonata Bonadio Over a year ago

Right! It works!

Collectives™ on Stack Overflow

Sum input and return values in div with JavaScript and jQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related