CODEWITHSUNDEEP
javascripthtmljquery
Jhonata Bonadio
Jhonata Bonadio

Reputation: 107

Sum input and return values in div with JavaScript and jQuery

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>

Upvotes: 1

Views: 149

Answers (1)

Neeraj
Neeraj

Reputation: 764

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>

Upvotes: 0

Related Questions