Multiply SELECT value with INPUT value

Asked

Viewed 421 times

2

How I could multiply the value of a SELECT with an INPUT and display it in another INPUT?

<!-- MULTIPLICAR ESSE SELECT -->
<select name="papel">
<option value="">Tipo Papel</option>
<?php
   $query = $conn->query("SELECT * FROM cadastropapel");
      while($reg = $query->fetch_array())
      {
          echo '<option value="'.$reg["valorpapel"].'">'.$reg["tipopapel"].'</option>';    
      }
?>    
</select>
<!-- COM ESSE INPUT -->
<input type="text" name="quantidade" placeholder="Quantidade">
<!-- E EXIBIR O RESULTADO NESTE OUTRO INPUT -->
<input type="text" name="valor" placeholder="Valor total">

  • Add or multiply?

  • It’s javascript even, it’s not?

1 answer

3


By creating 2 events you can multiply the two elements and play input valor. Altering the select or the input will already call the function that does the multiplication (explanations in the code):

document.addEventListener("DOMContentLoaded", function(){ // aguarda o DOM carregar

   var sel = document.querySelector("select[name='papel']"); // seleciona o SELECT
   var qtd = document.querySelector("input[name='quantidade']"); // seleciona o INPUT quantidade
   sel.onchange = multi; // evento change do SELECT
   qtd.oninput = multi; // evento oninput do INPUT quantidade

   // função para realizar a multiplicação
   function multi(){
      // converte o valor do SELECT em float e troca a vírgula da decimal por ponto, se houver
      var papel = parseFloat(sel.value.replace(",","."));
      var quant = qtd.value; // valor do INPUT quantidade
      var res = papel * quant; // faz a multiplicação
      
      // insere no INPUT valor se não for NaN. Se for NaN insere 0
      // toFixed(2) seta 2 casas decimais e o replace troca o ponto decimal pela vírgula
      document.querySelector("input[name='valor']").value = !isNaN(res) ? res.toFixed(2).replace(".", ",") : 0;
   }

});
<!-- SOMAR ESSE SELECT -->
<select name="papel">
<option value="">Tipo Papel</option>
   <option value="12,00">A4 - R$12,00</option>';    
   <option value="15.10">A3 - R$15,10</option>';    
</select>
<!-- COM ESSE INPUT -->
<input type="text" name="quantidade" placeholder="Quantidade">
<!-- E EXIBIR O RESULTADO NESTE OUTRO INPUT -->
<input type="text" name="valor" placeholder="Valor total">

  • 1

    Show sam! No bugs! =)

  • 1

    Thank you Andrei!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.