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:
E o JSON que vem do Banco é o seguinte:
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));;
}
});
}