Calculate values in jQuery

Question

Calculate values in jQuery

Navigation

#1 by (1 votes)

2

I have three fields:

<input type="number" id="product_quantity" name="product_quantity" placeholder="Quantidade">

<input type="text" id="buying_price" name="buying_price" placeholder="Valor Total" value="" class="form-control autonumber" data-a-sign="R$ " data-a-sep="." data-a-dec=",">

<input class="form-control autonumber" data-a-sign="R$ " data-a-sep="." data-a-dec="," name="others_price" id="others_price" placeholder="Outras Despesas" type="text">

I need to do the following. When entering the field product_quantity, appear in the div below. return_qty_product - if you fill in the others_price field, add the other value and divide by

After this, I need to divide the total value by the amount.

Example: 500 units, the total purchase was R $ 500.00 The result should be 1. In div results!

How can I do this in jQuery?

Edit:

I tried to do this:

$("#product_quantity").keyup(function(){
    $(".product_quantity_return").html($("#product_quantity").val());
});                

$("#buying_price").keyup(function(){
    var price = $("#buying_price").val();
    var price_return = price.replace("R$ ", "");
    var price_return_b = price_return.replace(",", "");
    var calc = price_return_b/$("#product_quantity").val();
    //alert(calc)
    $(".buying_price_return").html(calc.toLocaleString("pt-BR", { style: "currency" , currency:"BRL"}));
});

But the calculation gives exact number ... In the calculator I made $ 699.00 / 250 units - 2.79 ... but rounded to 2.80

jquery

asked by anonymous 02.12.2018 / 01:40

1 answer

Define array in python how does this HTML base tag work?

score 1 · Accepted Answer

Actually the result of 699/250 is 2,796. The% of% will only consider 2 decimal places, but if the third house is greater than or equal to 5, a rounding of the second decimal place is done, so 79 + 01 = 80.

If you want the exact .toLocaleString as a result, you need to work on the string, taking the value before and after the point that separates the decimals.

Since you are using a mask, you must do 2 replaces: one to remove the points and another to change the comma to the point, so that the value is in the format that JavaScript works:

var price_return_b = price_return.replace(/\./g, "").replace(",", ".");

First you must convert the result to string with 2,79 to get only 3 decimals after the point. This may even round the 3rd decimal place if the 4th is greater than or equal to 5, but it will not change the 2nd house, which is what matters:

var calc = (price_return_b/$("#product_quantity").val()).toFixed(3);

You can then use the .toFixed(3) method to get the value before and after the point and then concatenate:

calc = calc.substr(0, calc.indexOf(".")) + calc.substr(calc.indexOf("."),3);

Then you need to convert the string to float:

calc = parseFloat(calc);

In the .substr event, it is best to use the keyup event that will update the value even when you click the arrows with number field. However, the mask already uses this event in the field, so you can use both events at the same time in the 3 fields:

$(""#buying_price, #product_quantity, #others_price"").on("keyup input", function(){...

And you can already remove this code:

$("#product_quantity").keyup(function(){
    $(".product_quantity_return").html($("#product_quantity").val());
});

The function will look like this:

$("#buying_price, #product_quantity, #others_price").on("keyup input", function(){

   $(".product_quantity_return").html($("#product_quantity").val());

    var others = $("#others_price").val();
    var others_return = others.replace("R$ ", "");
    var others_return_b = others_return.replace(/\./g, "").replace(",", ".") || 0;

    var price = $("#buying_price").val();
    var price_return = price.replace("R$ ", "");
    var price_return_b = price_return.replace(/\./g, "").replace(",", ".") || 0;
    var calc = ((parseFloat(price_return_b)+parseFloat(others_return_b))/$("#product_quantity").val()).toFixed(3);
    calc = calc.substr(0, calc.indexOf(".")) + calc.substr(calc.indexOf("."),3);
    calc = parseFloat(calc);
    //alert(calc)
    $(".buying_price_return").html(calc.toLocaleString("pt-BR", { style: "currency" , currency:"BRL"}));
});

Example:

$("#buying_price, #others_price").maskMoney({
    prefix: "R$ ",
    decimal: ",",
    thousands: "."
});
            
$("#buying_price, #product_quantity, #others_price").on("keyup input", function(){

   $(".product_quantity_return").html($("#product_quantity").val());

    var others = $("#others_price").val();
    var others_return = others.replace("R$ ", "");
    var others_return_b = others_return.replace(/\./g, "").replace(",", ".") || 0;

    var price = $("#buying_price").val();
    var price_return = price.replace("R$ ", "");
    var price_return_b = price_return.replace(/\./g, "").replace(",", ".") || 0;
    var calc = ((parseFloat(price_return_b)+parseFloat(others_return_b))/$("#product_quantity").val()).toFixed(3);
    calc = calc.substr(0, calc.indexOf(".")) + calc.substr(calc.indexOf("."),3);
    calc = parseFloat(calc);
    //alert(calc)
    $(".buying_price_return").html(calc.toLocaleString("pt-BR", { style: "currency" , currency:"BRL"}));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://cdn.rawgit.com/plentz/jquery-maskmoney/master/dist/jquery.maskMoney.min.js"></script>
<input type="number" id="product_quantity" name="product_quantity" placeholder="Quantidade">
<input type="text" id="buying_price" name="buying_price" placeholder="Valor Total" value="" class="form-control autonumber" data-a-sign="R$ " data-a-sep="." data-a-dec=",">
<input class="form-control autonumber" data-a-sign="R$ " data-a-sep="." data-a-dec="," name="others_price" id="others_price" placeholder="Outras Despesas" type="text">
<br>
<div class="buying_price_return"></div>