Multiply SELECT value with INPUT value

Question

Multiply SELECT value with INPUT value

Navigation

#1 by (4 votes)

2

How could I multiply the value of one SELECT with one INPUT and show 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">

php mysql html input

asked by anonymous 11.08.2018 / 22:42

1 answer

I would like to assign yesterday's day as Start Date every time my program was started in a dateTimePicker Laravel find () function giving error

score 4 · Accepted Answer

Creating 2 events you can multiply both elements and play in input valor . Changing select or 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">