Skip to main content
2 de 4
adicionou 132 caracteres ao conteúdo

calcular o preço e quantidade de um input number e exibir resultado em tempo real

Bom Dia,

Estou com um problema talvez simples de resolver mas estou meio enferrujada,

Preciso multiplicar o valor do input(preço) com o input-number(quantidade) e jogar o resultado em outro campo input(total) em tempo real. Ou seja preciso calcular o valor de preço e quantidade quando clicasse no input-number para aumentar a quantidade ele já ia realizando a conta e jogava no campo total em tempo real.

Meu código está assim:

<script>
 

    function calcular(){
        var valor1 = parseInt(document.getElementById('preco').value, 10);
        var valor2 = parseInt(document.getElementById('quantidade').value, 10);
    
    
        document.getElementById('total').value = num1 + num2;
    }

  </script>

os campos:

 <input type="text" id="preco" name="preco" class="form-control" placeholder="Preco" value="" required onfocus="calcular()">
                  
  <input type="number" name="quantidade" id="quantidade" class="form-control"  value="" placeholder="" min="0"  max="" onblur="calcular()">
                  
  <input type="text" name="total" id="total" class="form-control" placeholder="">
              

Então o que eu queria era que ao clicar para aumentar a quantidade do produto no input-number, ele já realizasse a multiplicação e jogava o valor total no input total em tempo real.

os dados vem assim nos inputs:

       Preço   |    Quantidade  |    Total
     R$ 12,00  |       2     ^  |   R$ 24,00

imagem