3

Estou tendo um problema onde eu preciso fazer a multiplicação do valor de dois campos input (preço e quantidade) para jogar num terceiro campo (preço produto). Meu problema ocorre onde eu tento pegar o valor desses dois primeiros input com o JQuery, e o valor que me é retornado é de Undefined. Creio que o problema ocorre pelo fato de que, o valor de preço é trago diretamente do Banco de Dados assim que o usuário escolhe o produto desejado no campo de "Produtos",e esse valor também é mudado constantemente. O valor do campo quantidade vem como padrão de 0 e o usuário também pode alterar para o tanto que for sua necessidade. Como eu faço para conseguir armazenar o valor desses dois inputs e multiplica-los de forma dinâmica, onde sempre que o valor de cada um for mudado, a função acompanhe e traga o valor correto da multiplicação ?

O código HTML da parte de produtos:

<div class="produtos-wrap" id="clone-produtos">
            <div class=" text-center select_height">
                <b>Número:</b>
                <div id="index" class="font-pop">1</div>
            </div>

            <div class=" select_height" id="div_produtos">
                <b>Produto:</b>
                <select class="selectpicker form-control" data-show-subtext="false" data-live-search="true"
                        name="select_produtos" id="select_produtos" onchange="initProdutos()">
                    <?php
                    foreach ($result2 as $item_fornecedores) {
                        echo '<option data-subtext="' . $item_fornecedores['desc_produto'] . '" value="'
                            . $item_fornecedores['desc_produto'] . '">' . $item_fornecedores['desc_produto'] . '</option>';
                    }
                    ?>
                </select>
            </div>

            <div class="text-center select_height">
                <b>Embalagem:</b>
                <br>
                <input type="text" maxlength="2" class="edit-input font-pop" id="embalagem" name="embalagem" value="">
            </div>

            <div class="text-center select_height">
                <b>Preço:</b>
                <br>
                <input type="text" maxlength="5" id="preco" name="preco" class="edit-input font-pop">
            </div>

            <div class="text-center select_height">
                <b>Quantidade:</b>
                <br>
                <input type="text" maxlength="3" class="edit-input font-pop" value="0" id="quantidade-produto" name="quantidade-produto" onchange="onLoad()">
            </div>

            <div class="text-center select_height">
                <b>Preço do Produto:</b>
                <div id="preco-produto" class="font-pop"></div>
            </div>

            <div class="text-center select_height">
               <button id="remove">X</button>
            </div>

        </div>

A maneira que eu estava tentando pegar o valor das variaveis no JQuery:

function onLoad() {
    var $preco = $("#preco").value;
    alert($preco);

    var $qtd = $("#quantidade-produto").value;
    console.log($qtd);
}

Como foi pedido, o código que é trago através do select é esse:

http://prntscr.com/nssevt

E o JSON que vem do Banco é o seguinte:

http://prntscr.com/nssg23

Código de initProdutos(), como foi solicitado:

function initProdutos(){
    var letras_produtos = document.getElementById("select_produtos").value;
    $.ajax({
        type: "GET",
        url: "API.php",
        data: {
            "mode": "produtos",
            "letras_produtos": letras_produtos
        },
        dataType:"JSON",
        //CASO DÊ TUDO CERTO
        success:function(data){
            console.log(data);
            document.getElementById('embalagem').value = data[0]['embalagem'];
            document.getElementById('preco').value = data[0]['preco_base'];
        },
        error:function(request, error)
        {
            console.log("Request: " + JSON.stringify(request));;
        }
    });
}
0

2 Respostas 2

2

Cria uma função para recalcular os valores e escuta mudanças neles que invoquem o chamar dessa função. Algo assim:

$(function() {

  const $preco = $("#preco");
  const $qtd = $("#quantidade-produto");
  const $total = $("#preco-produto");

  function recalculate() {
    const total = Number($preco.val() || 0) * Number($qtd.val() || 0);
    $total.text(total);
  }

  function initProdutos() {
    var letras_produtos = $("#select_produtos").val();
    $.ajax({
      type: "GET",
      url: "API.php",
      data: {
        "mode": "produtos", letras_produtos
      },
      dataType: "JSON",
      //CASO DÊ TUDO CERTO
      success: function(data) {
        console.log(data);
        $('#embalagem').val(data[0]['embalagem']);
        $preco.val(data[0]['preco_base']);
        recalculate();
      },
      error: function(request, error) {
        console.log("Request: " + JSON.stringify(request));;
      }
    });
  }

  $preco.on('input', recalculate);
  $qtd.on('input', recalculate);
  recalculate();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-center select_height">
  <b>Preço:</b>
  <br>
  <input type="text" maxlength="5" id="preco" name="preco" class="edit-input font-pop" value="0">
</div>

<div class="text-center select_height">
  <b>Quantidade:</b>
  <br>
  <input type="text" maxlength="3" class="edit-input font-pop" value="1" id="quantidade-produto" name="quantidade-produto">
</div>

<div class="text-center select_height">
  <b>Preço do Produto:</b>
  <div id="preco-produto" class="font-pop"></div>
</div>

0
0

Bom dia.

Eu encapsularia os inputs numa div comum e usaria o seguinte:

var qtd = 0, result = 0;
$('#container input').each(function(){
    if(($(this).attr('name') == 'quantidade'){
        qtd = $(this).val();
    }else if($(this).attr('name') == 'valor-prod'){
        result = (qtd * $(this).val());
    }
});
$('#input-total').val(result);
  • Inventei os IDs e nomes de imputs para ser mais rápido, mas acho que está compreensível.

Coloque isso numa função e crie um evento para executá-la.

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 .