How to change two fields in JS

Question

So, I don’t understand much of js, and my problem is this: I have a list of products in my cart that shows the quantity, discount, unitario total and subtotal. js would need to change the quantity field and multiply it by the unitary price, automatically changing the subtotal. In the same way that the field discount when changed it should add the discount in the price of the product according to its quantity and also change the subtotal. I can not change the field quantity and discount independently and giving result in subtotal.

trolley

<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));

    });
});

Answer 1

You’re doing it wrong, putting one event inside another. You’re putting events change within the event input, this will generate conflict.

You can make it much simpler by using only one event in the discount and quantity fields at once, and fetch the elements of the altered line and perform the calculation.

See below how it is simpler to do this:

$(".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>