2

Como eu poderia multiplicar o valor de um SELECT com um INPUT e o mostrar em outro 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">

2
  • Somar ou multiplicar?
    – Sam
    11/08/2018 às 21:14
  • É com javascript mesmo, não é?
    – Sam
    11/08/2018 às 21:50

1 Resposta 1

3

Criando 2 eventos você consegue fazer a multiplicação dos dois elementos e jogar no input valor. Alterando o select ou o input já irá chamar a função que faz a multiplicação (explicações no código):

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

2
  • 1
    Show sam! No bugs! =) 11/08/2018 às 22:08
  • 1
    Obrigado Andrei!
    – Sam
    11/08/2018 às 22:10

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 .