Save values in session to show the total sum dynamically

Question

Good night.

I have a problem which is as follows; I have a form which is generated by a foreach, where it shows ticket values. In this form you can add the amount you want to buy from multiple tickets. I need to show at the end of the form the total value of all purchased tickets. I am trying to do via localStorage only that I am not able to generate the sum correctly.

Code in the view where it generates the form.

<?php if ($lotes) : ?>
                        <?php foreach ($lotes as $lote) : ?>
                            <div class="row">
                                <div class="col-sm-8">
                                    <div class="form-group">
                                        <strong>
                                            <label><i class="icon-ticket"></i> <?php echo $lote->ingresso_nome . ' - ' . $lote->lote_ingresso_nome . ' - R$ ' . converteDecimalDinheiro($lote->lote_ingresso_valor); ?>
                                        </strong></label>
                                        <span id="ingresso" hidden><?php echo converteDecimalDinheiro($lote->lote_ingresso_valor);?> </span>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>Quantidade</label>
                                        <div class="numbers-row">
                                            <input type="text" value="0" id="quantidade" class="qty2 form-control" name="quantidade[]">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6" align="right">
                                    <div class="form-group">
                                        <label>Sub Total</label>
                                        <h4>
                                            <input type="hidden" name="lote_ingresso[]" value="<?php echo $lote->lote_ingresso_id; ?>" />
                                            <input id="valor-ingresso" type="hidden" name="valor_ingresso" value="<?php echo $lote->lote_ingresso_valor; ?>" />
                                            <strong id="valor-total">0,00</strong>
                                        </h4>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <table class="table table_summary">
                                <tbody>
                                    <tr>
                                        <td>
                                            Conveniência
                                        </td>
                                        <td class="text-right">
                                            <input id="valor-taxa" type="hidden" name="valor_taxa" value="<?php echo $evento->evento_taxa_conveniencia; ?>" />
                                            <?php echo converteDecimalDinheiro($evento->evento_taxa_conveniencia) . ' %'; ?>
                                        </td>
                                    </tr>
                                    <tr>
                                    </tr>
                                    <tr class="total">
                                        <td>
                                            Total
                                        </td>
                                        <td class="text-right" id="valor-total-taxa">0,00</td>
                                    </tr>
                                </tbody>
                            </table>
                        <?php endforeach; ?>
                    <?php endif; ?>

and here the javascript code I’m making.

$(".button_inc").on("click", function() {
    console.log(localStorage.getItem('total'));
    var $button = $(this);
    var oldValue = $button.parent().find("input").val();
    var Total =  parseFloat(localStorage.getItem('total'));
    if ($button.text() == "+") {
        var newVal = parseFloat(oldValue) + 1;
        var valorTotal = parseFloat(newVal * $button.parent().parent().parent().parent().find("input[id='valor-ingresso']").val());

        var valorTotalTaxa = Number(valorTotal + (valorTotal * $('#valor-taxa').val() / 100)).toFixed(2);
        $button.parent().parent().parent().parent().find("strong[id='valor-total']").html('R$ ' + numeroParaMoeda(Number((valorTotal)).toFixed(2)));
        $button.parent().parent().parent().parent().next().next().find("td[id='valor-total-taxa']").html('R$ ' + numeroParaMoeda(valorTotalTaxa));

        var values = Request.Form["valor-total"].Split(',');
        valorTotalTaxa = parseFloat(valorTotalTaxa);

        console.log('dsfs'+ $('#valor-total').length);
        console.log(values);               
        console.log(Number(localStorage.getItem('total')).toFixed(2));

    } else {
        // Don't allow decrementing below zero
        if (oldValue > 1) {
            var newVal = parseFloat(oldValue) - 1;
            var valorTotal = parseFloat(newVal * $button.parent().parent().parent().parent().find("input[id='valor-ingresso']").val());
            var valorTotalTaxa = Number(valorTotal + (valorTotal * $('#valor-taxa').val() / 100)).toFixed(2);
            $button.parent().parent().parent().parent().find("strong[id='valor-total']").html('R$ ' + numeroParaMoeda(Number((valorTotal)).toFixed(2)));
            $button.parent().parent().parent().parent().next().next().find("td[id='valor-total-taxa']").html('R$ ' + numeroParaMoeda(valorTotalTaxa));
        } else {
            newVal = 0;
            $button.parent().parent().parent().parent().find("strong[id='valor-total']").html('R$ 0,00');
            $button.parent().parent().parent().parent().next().next().find("td[id='valor-total-taxa']").html('R$ 0,00');
        }
    }
    $button.parent().find("input").val(newVal);
});

above an example of how the form looks like , on the console I show the sum. I would like a light from where the error is, if someone thinks or even if they have a more peaceful way of doing.

Vlw

Answer 1

Friend, maybe this can help you: Add some event in the quantity inputs (in my case I used 'Blur'), use the 'each' function to go through all the quantities, add them up and update the overall total.

I hope it helps, baby.

  $(document).ready(function(){
        $(".qtd").on("blur", function(){
            var ar = []; // Total array
            var qtd = $(this).val(); 
            var qtdUnitaria = $(this).attr("data-unit");
            var totalLinha = qtd * qtdUnitaria; // Total da linha
            
            $(this).next('input').val(totalLinha); // Atualiza o valor total da linha
            
            $('.qtd').each(function(){
                var val = $(this).next('input').val();
                if(val){
                    ar.push(val);
                }else{
                    ar.push(0);
                }
            });

            var total = 0;
            for(var i=0;i < ar.length;i++) {
                total += parseFloat(ar[i]);
            }
            $(".total").html(total);
        });
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

          <ul>
            <li>
                <span>Ingresso show mamonas</span><br>
                <span>Valor unitário:750</span><br>
                Quantidade: <input class="qtd" data-unit="750" type="number"/>
                Subtotal: <input class="subTotal" type="number"/>
            </li><hr>
            
            <li>
                <span>Ingresso show Ramones</span><br>
                <span>Valor unitário:1200</span><br>
                Quantidade: <input class="qtd" data-unit="1200" type="number"/>
                Subtotal: <input class="subTotal" type="number"/>
            </li><hr>

            <li>
                <span>Ingresso show garotos podres</span><br>
                <span>Valor unitário: 350</span><br>
                Quantidade: <input class="qtd" data-unit="350" type="number"/>
                Subtotal: <input class="subTotal" type="number"/>
            </li><hr>
        </ul>
        <div>Total: <span class="total"></span></div>