2

boa noite estou com dificuldades em realizar a recuperação de uma dado no eu recupero mas queria que a recuperação fosse simultânea vou explicar melhor e assim que verem o código vão entender.

include("banco/banco.php");

$prod = $conexao_pdo->prepare(" SELECT *FROM precos  "); 
$prod->execute();
$result = $prod->fetchAll(PDO::FETCH_ASSOC);

recupero as informações do banco com essa querry, ela me retorna a seguintes informações id_precos, nome_precos, total_precos, que são referentes aos produtos.

<div class="col-sm-6">
   <div class="form-group">
      <div class="form-line">
         <select name="produto" class="form-control show-tick">
            <option value="">Produto</option>
            <?php foreach($result  as $prod){ ?>
            <option value="<?php  echo $prod['nome_precos']; ?>">
               <?php echo $prod['nome_precos']; ?></option>
            <?php } ?>
         </select>
      </div>
   </div>
</div>
<div class="col-sm-2">
   <div class="form-group">
      <div class="formline">
         <input type="text" class="form-control" value="" step="any" name="valor" readonly  placeholder="Valor Unitario">
      </div>
   </div>
</div>

esse trecho de código recupera o nome dos produtos e colocam dentro de um select para o usuário escolher estou com dificuldades na seguinte parte quando o usuário escolher o nome o valor referente ao nome do produto ir para o input valor unitário.

<div class="col-sm-2">
   <div class="form-group">
      <div class="form-line">
         <input type="number" class="form-control"  name="quantidade"  required placeholder="quantidade">
      </div>
   </div>
</div>
<div class="col-sm-2">
   <div class="form-group">
      <div class="form-line">
         <input type="number" class="form-control"  name="total" readonly required placeholder="total">
      </div>
   </div>
</div>

esse código acima o usuário entra com a quantidade de produtos ele deseja adquirir gostaria que o valor do produto la de cima fosse multiplicado pelo input quantidade que o usuário inseriu e retornasse o total no input. Quem puder dar um salve ai agradeço desde já!

2 Respostas 2

1

Crie um listener para o select e o input quatidade, que são os dois elementos que irão influenciar diretamente no resultado. Dentro do listener, você joga os valores para os devidos campos.

Altere o campo total para type="text" para aceitar decimais com vírgula, assim como está no campo valor unitário.

Veja exemplo abaixo:

$("select[name='produto'], input[name='quantidade']").on("change input", function(){

   var prod_preco = parseInt($("select[name='produto'] option:selected").data("valor"));
   $("input[name='valor']").val( !isNaN(prod_preco) ? prod_preco.toFixed(2).replace('.',',') : '' );

   var prod_qtd = parseInt($("input[name='quantidade']").val());
   prod_qtd = isNaN(prod_qtd) ? 0 : prod_qtd ;

   var valor_tt = prod_preco*prod_qtd;

   var desconto = 50; // porcentagem de desconto
   var prod_desc = valor_tt * (desconto/100);

   valor_tt -= prod_desc;

   $("input[name='total']").val( !isNaN(valor_tt) ? valor_tt.toFixed(2).replace('.',',') : '' );

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6">
   <div class="form-group">
      <div class="form-line">
         <select name="produto" class="form-control show-tick">
            <option value="">Produto</option>
            <option data-valor="30" value="produto1">produto1</option>
            <option data-valor="10" value="produto2">produto2</option>
         </select>
      </div>
   </div>
</div>
<div class="col-sm-2">
   <div class="form-group">
      <div class="formline">
         <input type="text" class="form-control" value="" step="any" name="valor" readonly  placeholder="Valor Unitario">
      </div>
   </div>
</div>

<div class="col-sm-2">
   <div class="form-group">
      <div class="form-line">
         <input type="number" class="form-control"  name="quantidade"  required placeholder="quantidade">
      </div>
   </div>
</div>
<div class="col-sm-2">
   <div class="form-group">
      <div class="form-line">
         <input type="text" class="form-control"  name="total" readonly required placeholder="total">
      </div>
   </div>
</div>

Seletor alternativo

Você pode usar um modo mais abreviado no seletor usando match com event handler:

$("select, input").on("change input", function(e){

   // aqui eu só detecto alterações em input ou select com os nomes
   // "produto" ou "quantidade"
   if(e.target.name.match(/[produto|quantidade]/)){
      var prod_preco = parseInt($("select[name='produto'] option:selected").data("valor"));
      $("input[name='valor']").val( !isNaN(prod_preco) ? prod_preco.toFixed(2).replace('.',',') : '' );

      var prod_qtd = parseInt($("input[name='quantidade']").val());
      prod_qtd = isNaN(prod_qtd) ? 0 : prod_qtd ;

      var valor_tt = prod_preco*prod_qtd;

      var desconto = 50; // porcentagem de desconto
      var prod_desc = valor_tt * (desconto/100);

      valor_tt -= prod_desc;

      $("input[name='total']").val( !isNaN(valor_tt) ? valor_tt.toFixed(2).replace('.',',') : '' );
   }

});
25
  • e como faço para carregar a questão do valor unitário para o input @dvd Commented 2/01/2018 às 0:22
  • ah sim ja vi meu erro aqui fez filé Commented 2/01/2018 às 1:49
  • no final da para dividir o total por uma variável $_SESSION['desconto']? Commented 2/01/2018 às 1:53
  • porcentagem se tiver como acrecer o $ , 00 nos valores que estão indo para os campos @dvd Commented 2/01/2018 às 1:59
  • @TulioVieira Código atualizado. Basta colocar um valor de desconto em formato de número.
    – Sam
    Commented 2/01/2018 às 2:10
1

Você poderia usar a estrategia de enviar os dados para o servidor, fazer os calculos lá e retornar uma nova pagina. Mas definitivamente isso não é mais uma boa prática (não sei se foi um dia), já que você pode fazer isso com javascript.

Você pode usar um evento chamado change que é disparado quando um elemento sofre alguma alteração. Sendo que isso varia de acordo com o tipo do input. Por exemplo para o select o evento será disparado quando o usuario escolher um option, e já para um campo input, com type number, por exemplo, será disparado quando o conteudo do campo for alterado e o campo perder o foco. Tudo isso está muito bem explicado no link anterior (change) e no html standard.

voltando ao seu caso você pode usar uma abordagem nativamente em javascript, embora talvez você opte por usar a resposta em jquery, já que como você está usando bootstrap, provavelmente você está usando a lib jquery. Mas de qualquer forma aqui está outra forma de fazer. Basicamente, coloco o codigo basico do html necessario e logo em seguida coloco o codigo javascript. Como não estou checando se o documento já carregou, isso deve garantir que todo o hmtl já tenha carregado antes de executar o codigo em javascript. No mais o codigo está suficentemente comentado.

<select name="produto" class="form-control show-tick">
    <option value="">Produto</option>
    <option value="11.50">produto 1</option>
    <option value="8.50">produto 2</option>
    <option value="20">produto 3</option>
</select>

<input type="number" class="form-control"  name="quantidade"  required placeholder="quantidade">
<input type="number" class="form-control"  name="total" readonly required placeholder="total">

<script>
//pegando referencia para os elementos relevantes. getElementsByName() retornará uma coleção de objetos. 
//Logo se houver apenas um será o do indice 0
var selectProduto = document.getElementsByName('produto')[0];
var inputQuantidade = document.getElementsByName('quantidade')[0];
var inputTotal = document.getElementsByName('total')[0];

//agora é preciso adicionar o evento change no selectProduto e no inputQuantidade
//isso permite refazer o calculo automaticamente quando qualquer um dos dois mudar
//Embora o evento change seja disparado de forma diferente em cada um deles.
//No select será disparado quando o usuario escolher um option
//ja no inputQuantidade será disparado quando o conteudo for modificado e o campo perder o foco

selectProduto.addEventListener('change', function (){
    atualizarTotal(calcular(selectProduto.value, inputQuantidade.value));       
});

inputQuantidade.addEventListener('change', function (){
    atualizarTotal(calcular(selectProduto.value, inputQuantidade.value));
});

//retorna o valor de preço * quantidade, ambos considerados do tipo float
//aqui você pode adicionar algumas validações
function calcular(preco, quantidade){
    var total = parseFloat(preco) * parseFloat(quantidade);
    return total;
}

//atualizar input name="total"
//aqui você poderá formatar a exibição em formato monetrio, tipo R$ ou US$
function atualizarTotal(valor){
    //como você pode perceber o valor anterirmente armazenado em inputTotal
    //será sempre sobreescrito
    inputTotal.value = valor;
}
</script>
2
  • só que o input produto recebe o nome do produto o input valor tem que receber o valor correspondente ao produto que selecionei no input com nome e a multiplicação do preço * quantidade la ta certinho e se possível colocar na função calcular onde vc multiplicou o valor no final para dar o total dividir ele por uma variável $_SESSION['desconto']. @juven_v Commented 2/01/2018 às 0:43
  • Isso exige uma nova abordagem. A mais simples seria adicionar um campo hidden no form. Algo como <input type="hidden" name="desconto" value="<?php echo $_SESSION['desconto'];?">, e captura-lo com javascript no momento apropriado. Embora você tenha que validar isso no servidor. E isso remete a uma solução mais adequada, que é criar uma função no servidor para fazer esse calculo e requisita-la usando ajax.
    – Juven_v
    Commented 2/01/2018 às 2:04

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 .