2

Tenho três campos:

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

Preciso fazer o seguinte. Ao digitar o campo product_quantity, aparecer na div embaixo. return_qty_product - se a caso preencher o campo others_price deverá somar ao outro valor e dividir pela quantidade

Feito isto, preciso dividir o valor total, pela quantidade.

Exemplo: 500 unidades, o total da compra foi R$ 500,00 O resultado deverá ser 1. Na div results!

Como posso fazer isto em jQuery?

Edit:

Eu tentei fazer assim:

$("#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"}));
}); 

Mas o cálculo dá numero exato... Na calculadora eu fiz R$ 699,00 / 250 unidades - 2.79... mas arredondou para 2.80

0

1 Resposta 1

1

Na verdade o resultado de 699/250 é 2.796. O .toLocaleString irá considerar apenas 2 casas decimais, mas se a terceira casa for maior ou igual a 5, é feito um arrendondamento para maior no valor da segunda casa decimal, logo 79 + 01 = 80.

Se você quer os exatos 2,79 como resultado, você precisa trabalhar em cima de string, pegando o valor antes e depois do ponto que separa as decimais.

Como você está usando máscara, deve fazer 2 replaces: um pra remover os pontos e outro para trocar a vírgula pelo ponto, isso para que o valor fique no formato que o JavaScript trabalha:

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

Primeiro você deve converter o resultado em string com .toFixed(3) para pegar apenas 3 decimais depois do ponto. Isso até poderá arrendondar a 3ª casa decimal caso a 4ª seja maior ou igual a 5, mas não alterará a 2ª casa, que é o que interessa:

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

Em seguida pode usar o método .substr para pegar o valor antes e depois do ponto e depois concatenar:

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

Depois é preciso converter a string em float:

calc = parseFloat(calc);

Na questão do evento keyup, é melhor usar o evento input que irá atualizar o valor até quando você clicar nas setas com campo tipo number. Porém, a máscara já usa esse evento no campo, então você pode usar os dois eventos ao mesmo tempo nos 3 campos:

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

E você já pode remover esse código:

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

A função ficará assim:

$("#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"}));
});

Exemplo:

$("#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>

12
  • Então é isso mesmo, porém, se eu adicionar a quantidade e o valor, dá certo, se eu alterar a quantidade, não dá certo... o que pode ser? 2/12/2018 às 11:04
  • Ainda tem falha... vamos suporte que eu coloque no campo quantidade 10, e no campo valor total 10,00, o retorno deveria ser 1,00. até ai funciona, se eu trocar a quantidade pra 20, o preço médio retorna 50,00. 2/12/2018 às 19:55
  • Fiz o mesmo teste aqui no executar, e dá certo, mas quando eu volto o campo anterior, ele refaz o calculo 2/12/2018 às 19:58
  • Aí dá a diferença 2/12/2018 às 19:59
  • prntscr.com/lpssqw 2/12/2018 às 20:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .