1

Galera, estou desenvolvimento um formulário que irá calcular o valor do frete e descontar os débitos para chegar ao valor líquido que o Motorista tem para receber. Porém eu queria que alguns campos exibissem os valores conforme o usuário vai preenchendo o formulário.

Por exemplo a imagem, o campo "Diferença de Peso" irá calcular o "Peso de Saída" - "Peso de Chegada" para saber a diferença. Alguém sabe de algum tutorial de JavaScript/jQuery que realize algo parecido que eu consiga me basear?

 <script type="text/javascript">
            var tPesoSaida   = document.getElementById( 'ps' );
            var tPesoChegada = document.getElementById( 'pc' );
            var tPesoTotal   = document.getElementById( 'pt' );

            tPesoSaida.onkeyup=calcula;
            tPesoChegada.onkeyup=calcula;

            function calcula() {
                tPesoTotal.value = (tPesoSaida.value - tPesoChegada.value);
            }
        </script>
        <div class="small-2 large-4 columns">
            <label>Peso de Saída</label>
            <input type="text" value="0" placeholder="37000" name="PesoSaida" id="ps"/>
        </div>
        <div class="small-2 large-4 columns">
            <label>Peso de Chegada</label>
            <input type="text" value="0" placeholder="37090" name="PesoChegada" id="pc"/>
        </div>
        <div class="small-2 large-4 columns">
            <label>Diferença de Peso</label>
            <input type="text" value="0" name="PesoTotal"  id="pt" readonly="readonly" tabindex="-1"/>
        </div>
8
  • E o que você tentou fazer até agora? Qual a sua dificuldade específica?
    – gmsantos
    Commented 20/03/2016 às 21:14
  • Eu andei pesquisando, porém não consegui encontrar nada relacionado a jQuery que seja como se fosse um "sair do campo" pra realizar o evento. Commented 20/03/2016 às 21:15
  • Com isso vc pode calcular enquanto o usuário vai digitando... stackoverflow.com/questions/1481152/…
    – gmsantos
    Commented 20/03/2016 às 21:16
  • Mas como vou falar quem é o input1, input2 e input3? Para passar os valores. Commented 20/03/2016 às 21:53
  • Id, name do campo... qualquer seletor válido.
    – gmsantos
    Commented 20/03/2016 às 22:58

1 Resposta 1

3

Segue uma demonstração bem simples de como fazer em JS:

var tQtd = document.getElementById( 'qtd' );
var tVlr = document.getElementById( 'vlr' );
var tTot = document.getElementById( 'tot' );

tVlr.onkeyup=calcula;
tQtd.onkeyup=calcula;

function calcula() {
  tTot.value = tQtd.value * tVlr.value;
}
<input id="qtd" value="0" name="quantidade"><br>
<input id="vlr" value="0" name="valor"><br>
<input id="tot" value="0" name="total" readonly>

Notar que não está sendo feita nenhuma verificação dos valores, apenas coloquei o básico para demonstrar como fazer.

Se precisar de coisas mais avançadas, como controlar o separador de decimais, e ajustar a formatação numérica, temos respostas explicando como fazer aqui mesmo:

Como calcular moeda aparecendo casas decimais em JS?

13
  • Utilizar um Framework CSS pode influenciar no funcionamento do JavaScript? Editei a pergunta com o trecho do código que fiz baseado no seu. Commented 21/03/2016 às 1:22
  • Se quer mesmo usar name, precisa de um índice: var tPesoSaida = document.getElementsByName( 'PesoSaida' )[0]; mas ainda recomendo o ID.
    – Largato
    Commented 21/03/2016 às 1:45
  • O OnKeyUp no caso quando o usuário der uma tab que ele vai efetuar? Commented 21/03/2016 às 1:50
  • @JulianoBazzi quando digitar qualquer coisa e soltar a tecla. Tem que ser no Up, pois no Down o valor do campo ainda não é alterado. Se preferir que mude somente quando o campo perder o foco, é onchange. Se rodar o demo acima, vai ver que muda quando vc está digitando.
    – Largato
    Commented 21/03/2016 às 1:52
  • Se quiser cobrir situações mais complexas (copiar e colar, mudanças por JS, etc) melhor um timer atualizando o campo. Em vez de chamar a função no key, chama no setinterval.
    – Largato
    Commented 21/03/2016 às 1:58

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 .