3

Entao, nao entendo muito de js, e meu problema é o seguinte: eu tenho uma lista de produtos no meu carrinho que mostra a quantidade, desconto, total unitario e subtotal. O js precisaria alterar o campo de quantidade e multiplicar pelo preço unitario, alterando automaticamente o subtotal. Da mesma forma que o campo desconto ao ser alterado ele deve acrescentar o desconto no preço do produto de acordo com sua quantidade e alterar tambem o subtotal. Eu nao consigo alterar o campo quantidade e desconto de formas independentes e dando resultado de no subtotal.

carrinho

<div class="div-venda3 carrinho">
    <h1 class="page-header carrinho_interno"> Carrinho </h1>   
    <br />
        <table class="table">
            <thead>
                <tr>
                    <th class="carrinhoth"><?= $this->Paginator->sort('ID'); ?></th>
                    <th class="carrinhoth"><?= $this->Paginator->sort('Nome'); ?></th>
                    <th class="carrinhoth"><?= $this->Paginator->sort('Quantidade'); ?></th>
                    <th class="carrinhoth"><?= $this->Paginator->sort('Desconto'); ?></th>
                    <th class="carrinhoth"><?= $this->Paginator->sort('Preço Uni.'); ?></th>
                    <th class="carrinhoth"><?= $this->Paginator->sort('Total'); ?></th>
                </tr>
            </thead>

            <tbody>
            <?php
            if(isset($_SESSION['carrinho']))
            {
                $carrinho = $_SESSION['carrinho'];
                for ($i=0; $i < count($carrinho) ; $i++) { ?>
                    <tr>
                        <td><?= $carrinho[$i]['id']; ?></td>
                        <input type="hidden" name="produto[]" value="<?= $carrinho[$i]['id']; ?>">
                        <td class="td-venda"><?= $carrinho[$i]['nome']; ?></td>
                        <input type="hidden" name="nome[]" value="<?= $carrinho[$i]['nome']; ?>">
                        <td><input style="width: 30%;" type="number"  name="quantidade[]" class="quant" value="<?= $carrinho[$i]['quantidade']; ?>" min="1" max="<?= $carrinho[$i]['quantidade']; ?>"></td>
                        <td><input style="width: 30%;" type="number"  name="desconto[]" class="desconto" value="">%</td>
                        <td>R$ <span class="preco_uni"><?= $carrinho[$i]['preco']; ?></span></td>
                        <input type="hidden" name="preco[]" value="<?= $carrinho[$i]['preco']; ?>">
                        <td>R$ <span class="total_unitario">00.00</span></td>
                        <input type="hidden" name="total[]" class="total_unitario">
                        <td><a href="?deletar=<?php echo $carrinho[$i]['id']; ?>"><button type="button" class="btn btn-danger">x</button></a></td>
                    </tr>
                    <?php 
                } 
            }?>

            </tbody>
        </table>
    </form>
    <?= $this->Form->end() ?>
</div>

js

$(".desconto").on("input", function(){
    desconto = $(this).val();
    $(".quant").each(function(){
        quantidade = parseFloat($(this).val());
        precounitario = parseFloat($(this).parent().parent().find(".preco_uni").text());
        desconto = parseFloat($(this).parent().parent().find(".desconto").val());
        totalProd = (quantidade * precounitario);
        totalDesconto = (desconto * totalProd)/100;
        totalVenda = parseFloat(totalDesconto) + parseFloat(totalProd);
        $(this).parent().parent().find(".total_unitario").text((totalVenda).toFixed(2));
        $(this).parent().parent().find(".total_unitario").val((totalVenda).toFixed(2));

    });
     $(".quant").change(function(){
        quantidade = parseFloat($(this).val());
        precounitario = parseFloat($(this).parent().parent().find(".preco_uni").text());
        desconto = parseFloat($(this).parent().parent().find(".desconto").val());
        totalProd = (quantidade * precounitario);
        totalDesconto = (desconto * totalProd)/100;
        totalVenda = parseFloat(totalDesconto) + parseFloat(totalProd);
        $(this).parent().parent().find(".total_unitario").text((totalVenda).toFixed(2));
        $(this).parent().parent().find(".total_unitario").val((totalVenda).toFixed(2));

    });
});

1 Resposta 1

2

Está fazendo errado, colocando um evento dentro de outro. Está colocando eventos change dentro do evento input, isso vai gerar conflito.

Pode fazer de uma forma muito mais simples, usando apenas um evento nos campos de desconto e quantidade de uma só vez, e buscar os elementos da linha alterada e realizar o cálculo.

Veja abaixo como é mais simples fazer isso:

$(".quant, .desconto").on("input", function(){
   
   var linha = $(this).closest("tr"); // busca a linha o elemento alterado
   var subtotal_txt = linha.find(".total_unitario").eq(0); // busca a span do total
   var subtotal_val = linha.find(".total_unitario").eq(1); // busca o hidden do total

   var quant = linha.find(".quant").val() || 0; // busca a quantidade
   var desconto = linha.find(".desconto").val() || 0; // busca o desconto
   var preco = parseFloat(linha.find("[name='preco[]']").val()) || 0; // busca o preço

   var subtt = (quant*preco) - ((desconto/100)*(quant*preco)); // faz o cálculo
   subtt = subtt.toFixed(2); // aplica o toFixed
   
   subtotal_txt.text(subtt); // coloca o resultado na span
   subtotal_val.val(subtt); // coloca o resultado no input
});
.table{
   width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-venda3 carrinho">
    <h1 class="page-header carrinho_interno"> Carrinho </h1>   
    <br />
        <table class="table" border="1">
            <thead>
                <tr>
                    <th class="carrinhoth">ID</th>
                    <th class="carrinhoth">Nome</th>
                    <th class="carrinhoth">Qtde</th>
                    <th class="carrinhoth">Desconto</th>
                    <th class="carrinhoth">Unit.</th>
                    <th class="carrinhoth">Total</th>
                </tr>
            </thead>

            <tbody>
                 <tr>
                     <td>1</td>
                     <input type="hidden" name="produto[]" value="1">
                     <td class="td-venda">Produto 1</td>
                     <input type="hidden" name="nome[]" value="Produto1">
                     <td><input style="width: 30%;" type="number"  name="quantidade[]" class="quant" value="2" min="1" max="10"></td>
                     <td><input style="width: 30%;" type="number"  name="desconto[]" class="desconto" value="">%</td>
                     <td>R$ <span class="preco_uni">3.00</span></td>
                     <input type="hidden" name="preco[]" value="3.00">
                     <td>R$ <span class="total_unitario">00.00</span></td>
                     <input type="hidden" name="total[]" class="total_unitario">
                     <td><a href="?deletar=1"><button type="button" class="btn btn-danger">x</button></a></td>
                 </tr>
                 <tr>
                     <td>2</td>
                     <input type="hidden" name="produto[]" value="2">
                     <td class="td-venda">Produto 2</td>
                     <input type="hidden" name="nome[]" value="Produto2">
                     <td><input style="width: 30%;" type="number"  name="quantidade[]" class="quant" value="3" min="1" max="10"></td>
                     <td><input style="width: 30%;" type="number"  name="desconto[]" class="desconto" value="">%</td>
                     <td>R$ <span class="preco_uni">5.00</span></td>
                     <input type="hidden" name="preco[]" value="5.00">
                     <td>R$ <span class="total_unitario">00.00</span></td>
                     <input type="hidden" name="total[]" class="total_unitario">
                     <td><a href="?deletar=1"><button type="button" class="btn btn-danger">x</button></a></td>
                 </tr>
            </tbody>
        </table>
    </form>
</div>

1
  • Nossa meu deus, obrigada e desculpa pela minha burrice, muito mais facil assim tambem. Obrigada!
    – LMT
    Commented 4/09/2019 às 17:15

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 .