1

Boas Estou com o desafio de calcular o valor final do produto na mesma pagina sem refresh, com 4 campos de descontos sobre um valor bruto apresentando o resultado unitário e total (itens de um pedido de compras ou invoice seja lá como for o nome atribuido) . Penso que pela imagem fica mais fácil avaliar o resultado que pretendo. Digitando o campo quantidade e percentuais, automaticamento os campos "Unitario" e "Total" se alteram como se fosse uma calculadora ou planilha de excel.

Bruto = preço de tabela bruto

Descontos encadeados = descontos a serem aplicados sobre o preço bruto da mercadoria.

Exemplo: Bruto = $100,00 - Quantidade = 2 peças

Descontos a serem aplicados: 40+10+10+29

Total unitário = $34,506

Total do item (* quantidade) = $69,01

Desde já agradeço.

Calculo de percentual de desconto

Este foi o que mais se aproximou do resultado. Neste caso ele multiplica o unitario pela quantidade o que esta errado mas se o unitario for 1, os descontos sao calculados corretamente:

    <input class="form-control" type="text" id="bruto" readonly="readonly" value="200">

    <input class="text-right form-control" type="number" placeholder="Qtde" name="qtde" id="qtde" autofocus="autofocus" required="required" pattern="[0-9]+([\.][0-9]+)?" />

    <input class="text-right form-control" name="desc1" type="number" placeholder="Des 1" id="desc1" size="5" maxlength="3" step="0.01" />
    <input class="text-right form-control" name="desc2" type="number" placeholder="Des 2" id="desc2" size="5" maxlength="3" step="0.01" />
    <input class="text-right form-control" name="desc3" type="number" placeholder="Des 3" id="desc3" size="5" maxlength="3" step="0.01" />
    <input class="text-right form-control" name="desc4" type="number" placeholder="Des 4" id="desc4" size="5" maxlength="3" step="0.01" />



    $('input').on('keyup',function(){

        var br = parseFloat($('#bruto').val() != '' ? $('#bruto').val() : 0); // bruto

        var qt = parseFloat($('#qtde').val()  != '' ? $('#qtde').val() : 0);  // qtde

        var d1 = parseFloat($('#desc1').val() != '' ? $('#desc1').val() : 0); // desconto 1
          
          // desconto 1
          $('#unitario').val(br-(br*(d1/100)));
          $('#total').val(qt*(br-(br*(d1/100))));

          // desconto 2  
          var tot = parseFloat($('#total').val() != '' ? $('#total').val() : 0);
          var d2  = parseFloat($('#desc2').val() != '' ? $('#desc2').val() : 0);
          var totd2 = tot-(tot*(d2/100));
         

          $('#unitario').val(totd2);
          $('#total').val(qt*totd2);
          

          // desconto 3  
          var d3 = parseFloat($('#desc3').val() != '' ? $('#desc3').val() : 0);

          $('#unitario').val(totd2-(totd2*(d3/100)));
          $('#total').val(qt*(totd2-(totd2*(d3/100))));

          // desconto 4
          var vlrD3 = totd2-(totd2*(d3/100));
          var d4    = parseFloat($('#desc4').val() != '' ? $('#desc4').val() : 0);
          //console.log(vlrD3-(vlrD3*(d4/100)));

          $('#unitario').val(vlrD3-(vlrD3*(d4/100)));
          $('#total').val(qt*(vlrD3-(vlrD3*(d4/100))));

    });

UPDATE: Agora apareceu a demanda de inserir o valor final desejado e apartir dele, determinar o desconto sobre o valor bruto e preencher o campo input com o percentual. Teria que ter habilitado as duas opções: se o usuario preencher o valor-unitario-final ja aparece o desconto no input desc1.

valor-desc1 = (valor-unitario-final / valor-bruto) -1

Alguém faz idéia de como ?? Agradeço..

3
  • 1
    Poderia postar seu html e javascript? 23/01/2018 às 13:35
  • Ok inseri na pergunta o que mais se aproximou do que eu quero. 23/01/2018 às 14:22
  • A quantidade de itens não deve influenciar no total?
    – Sam
    23/01/2018 às 14:52

1 Resposta 1

1

Creio que o problema esteja apenas nas multiplicações qt* intermediárias. Deixe apenas no último $('#total').val que terá o resultado esperado:

$('input').on('keyup',function(){

    var br = parseFloat($('#bruto').val() != '' ? $('#bruto').val() : 0); // bruto

    var qt = parseFloat($('#qtde').val()  != '' ? $('#qtde').val() : 0);  // qtde

    var d1 = parseFloat($('#desc1').val() != '' ? $('#desc1').val() : 0); // desconto 1

      // desconto 1
      $('#unitario').val(br-(br*(d1/100)));
      $('#total').val((br-(br*(d1/100))));

      // desconto 2  
      var tot = parseFloat($('#total').val() != '' ? $('#total').val() : 0);
      var d2  = parseFloat($('#desc2').val() != '' ? $('#desc2').val() : 0);
      var totd2 = tot-(tot*(d2/100));


      $('#unitario').val(totd2);
      $('#total').val(totd2);


      // desconto 3  
      var d3 = parseFloat($('#desc3').val() != '' ? $('#desc3').val() : 0);

      $('#unitario').val(totd2-(totd2*(d3/100)));
      $('#total').val((totd2-(totd2*(d3/100))));

      // desconto 4
      var vlrD3 = totd2-(totd2*(d3/100));
      var d4    = parseFloat($('#desc4').val() != '' ? $('#desc4').val() : 0);
      //console.log(vlrD3-(vlrD3*(d4/100)));

      $('#unitario').val((vlrD3-(vlrD3*(d4/100))).toFixed(2));
      $('#total').val((qt*(vlrD3-(vlrD3*(d4/100)))).toFixed(2));

});

//a linha abaixo é apenas para o exemplo
$('input').trigger('keyup');
.TableCSS table {
    font-size:12px; 
    color:#000; 
    width:100%; 
    border-width: 1px; 
    border-color: #a9a9a9;
    border-collapse: collapse;  
    zoom: 100%; 
    text-align:left;
}
.TableCSS th {
    white-space: nowrap!important;
    font-size:12px;
    background-color:#ffffff;
    border-width: 1px;
    padding: 3px;
    border-style: solid;
    border-color: #a9a9a9; 
    text-align:left; 
    padding-bottom: 0px; 
    padding-top: 0px; 
    font-style: italic;

}
.TableCSS tr {
    background-color:#ffffff; 
    padding-bottom: 0px; 
    padding-top: 0px; 
    text-align:center;
}
.TableCSS td {
    font-size: 12px;
    border-width: 1px;
    padding: 3px;
    border-style: solid;
    border-color: #a9a9a9;
    text-align:left;
    background-color: #ffffff;
    padding-bottom: 0px;
    padding-top: 0px; 
    color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="form-control" type="text" id="bruto" readonly="readonly" value="100">
<input class="text-right form-control" type="number" placeholder="Qtde" value="2" name="qtde" id="qtde" autofocus="autofocus" required="required" pattern="[0-9]+([\.][0-9]+)?" />

<input class="text-right form-control" value="40" name="desc1" type="number" placeholder="Des 1" id="desc1" size="5" maxlength="3" step="0.01" />
<input class="text-right form-control" value="10" name="desc2" type="number" placeholder="Des 2" id="desc2" size="5" maxlength="3" step="0.01" />
<input class="text-right form-control" value="10" name="desc3" type="number" placeholder="Des 3" id="desc3" size="5" maxlength="3" step="0.01" />
<input class="text-right form-control" value="29" name="desc4" type="number" placeholder="Des 4" id="desc4" size="5" maxlength="3" step="0.01" />

<input id="unitario" />
<input id="total" />

7
  • Perfeito. Funcionou exatamente como eu queria. Muito Obrigado 23/01/2018 às 16:56
  • @user2937839 Legal! Não deixe de marcar ✓, isto é importante e nos ajuda. Obg!
    – Sam
    23/01/2018 às 16:59
  • Mais uma duvida: type="number" no input aparece as setinhas para incrementar a quantidade por exemplo mas o " on keyup " nao responde ou reconhece a mudança no resultado. Alguma idéia??? 23/01/2018 às 17:17
  • @user2937839 Adicione ao keyup um change: $('input').on('keyup change',function(){
    – Sam
    23/01/2018 às 17:21
  • Que lindo😍. 👍 23/01/2018 às 17:23

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 .