Calculate values in jQuery

Question

I have three camps:

<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 typing the product_quantity field, appear in the div below. return_qty_product - if you fill out the others_price field, add it to the other value and divide it by the amount

Once this is done, I need to divide the total value by the quantity.

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

$("#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... On the calculator I made R $ 699,00 / 250 units - 2.79... but rounded up for 2.80

Answer 1

In fact the result of 699/250 is 2,796. The .toLocaleString will consider only 2 decimal places, but if the third box is greater than or equal to 5, is rounded to higher in the value of the second decimal place, then 79 + 01 = 80.

If you want the exact ones 2,79 as a result, you need to work on string, picking the value before and after the point that separates the decimals.

Since you are wearing a mask, you must do 2 places: one to remove the dots and the other to exchange the comma for the dot, 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 into string with .toFixed(3) to pick up only 3 decimals after the point. This may even round out the 3rd decimal place if the 4th is greater or equal to 5, but it will not change the 2nd box, which is what matters:

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

Then you can use the method .substr to take 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 matter of the event keyup, it is better to use the event input which will update the value until you click on the arrows with type field number. 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>
<script src="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>