Estou tentando fazer uma função que pegue os valores de todas <div class="preco-produto">
faça a soma total e popule na <div id="final">
.
Fiz a função que separa o valor número do String da div
, mas não estou conseguindo fazer com que a apresentação do total seja dinâmico.
Preciso que sempre que o valor de cada campo <div class="preco-produto">
seja alterado, diretamente o do <div id="final">
também seja, fazendo um calculo automático.
Lembrando que, sempre que o usuário clica no botão "Add", é criada outra div
com os mesmos campos da primeira, ou seja, pode haver vários <div class="preco-produto">
. Alguém consegue me dar uma luz de como posso mudar meu código para que isso ocorra ?
index.php:
<div id="allProducts">
<div class="produtos-wrap"> <!---- DIV A SER CLONADA / ADICIONADA !---->
<div class=" text-center select_height">
<b>Número:</b>
<div class="index" class="font-pop">1</div>
</div>
<div class="text-center select_height">
<b>ID:</b>
<div class="font-pop number_id_produto">0</div>
</div>
<div class=" select_height">
<b>Selecione um produto:</b>
<select class="selectpicker form-control teste" data-show-subtext="false"
data-live-search="true" name="select_produtos[]" onchange="initProdutos(this)">
<?php
foreach ($result2 as $item_produtos) {
echo '<option data-subtext="' . $item_produtos['desc_produto'] . '" value="'
. $item_produtos['desc_produto'] . '">' . $item_produtos['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" name="embalagem[]" value="">
</div>
<div class="text-center select_height">
<b>Preço:</b>
<br>
<input type="text" maxlength="5" 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="0"
name="quantidade-produto[]">
</div>
<div class="text-center select_height">
<b>Preço do Produto:</b>
<div class="font-pop preco-produto" onchange="split()">R$ 0</div>
</div>
<div class="text-center select_height">
<button class="remover">X</button>
</div>
</div>
</div>
<button id="add-button" onclick="">+</button>
</div>
<div class="container" id="produto-total">
<div class="assinatura col-lg-6">
Assinatura
</div>
<div class="preco-final col-lg-6">
<b>Preço total:</b>
<div id="total"></div>
</div>
</div>
JQuery:
function initProdutos(e) {
var wraper = $(e).closest(".produtos-wrap"); // pega a div principal
var letras_produtos = $(e).val()
const $preco = $("[name='preco[]']", wraper);
const $qtd = $("[name='quantidade-produto[]']", wraper);
const $total = $(".preco-produto", wraper);
const $final = $('#total');
function recalculate() {
const total = Number($preco.val() || 0) * Number($qtd.val() || 0);
$total.text("R$ " + total);
}
function sub(){
$($preco).on('change',function () {
var sub = $(this).val().replace(',', '.');
$(this).val(sub);
})
}
function split(){
$($total).each(function () {
var str = $(this).html();
var res = str.split(" ");
$($final).text(res[1]);
})
}
function total(){
$('.preco-produto div').on('change',function () {
var t = 0;
$('.preco-produto').each(function (i,e) {
if ($(e).val()){
if (isNaN(i)) {$(e).val(''); return; }
t += parseFloat(i);
$($final).text('R$ ' + t.toFixed(2));
}
})
})
}
$.ajax({
type: "GET",
url: "API.php",
data: {
"mode": "produtos", letras_produtos
},
dataType: "JSON",
//CASO DÊ TUDO CERTO
success: function (data) {
$('[name="embalagem[]"]', wraper).val(data[0]['embalagem']);
$('.number_id_produto', wraper).text(data[0]['id_produto']);
recalculate();
sub();
total();
},
error: function (request, error) {
console.log(error);
}
});
$preco.on('input', recalculate, sub());
$qtd.on('input', recalculate);
$total.on('div',split(),total());
$final.on('div',split(),total());
recalculate();
sub();
split();
total();
};