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>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>