Sum subtotal with jquery

Question

Good afternoon,

Access this site: conepa.agenciaweblab.com.br/inscriptions Guys, I’m having a little problem with my stroller system, I am able to multiply the value with the amount of each loop, however I am not making the loop of the cart with javascript, I am doing with php, and I need to add the values of the subtotals, I would like some solution. Main fields:

<td class="price-col" id="preco_<?= $list_cart->post_id; ?>" data-valor="<?= $list_cart->post_valor; ?>"><?= $list_cart->post_valor; ?></td>
<td class="quantity-col">
   <input type="number" onChange="Multiplica(<?= $list_cart->post_id; ?>)" class="form-control qtd_<?= $list_cart->post_id; ?>" <?= $disabled; ?> min="1" max="<?= $list_cart->post_quantidade; ?>" placeholder="0" required="">

and now jquery:

function Multiplica(id) {

    var valor = $('#preco_' + id).text();
    var quantidade = $('.qtd_' + id).val();
    var total = valor * quantidade;
    document.getElementById('sub_' + id).innerHTML = number_format(total, '2', ',', '.');

    var totals = 0;
    $('#preco_' + id).each(function () {
        totals += (valor * quantidade);
    });
    $("#totalSoma").text(totals);
}

someone to help? just need the total sum, what I did, did not have much success.

Answer 1

There’s only one mistake in $('#preco_' + id).each(function () {});, because it is only executed for a single td that is in the same line of the input that was changed the quantity. I imagine you wanted to access all td tags that have id starting with preco_ and the total amount was calculated. A small modification in your search is enough. See:

function Multiplica(id) {

        var valor = $('#preco_' + id).text();
        var quantidade = $('.qtd_' + id).val();
        var total = valor * quantidade;
        document.getElementById('sub_' + id).innerHTML = number_format(total, '2', ',', '.');

        var totals = 0;
        //procura todos os elementos em que o id começa com preco_ e que está dentro de uma td
        $("td[id^='preco_']").each(function () {
            //conteudo da tag td que tem id começando com #preco_
            var valor = $(this).text();
            //encontra a tag tr pai da tag td, depois encontra a tag quantity-col 
            //e retorna o valor do input
            var quantidade = $(this).parent().find('.quantity-col').find('input').val();

            totals += (valor * quantidade);
        });
        $("#totalSoma").text(number_format(totals, '2', ',', '.'));
    }

Optionally you can do the search using the class price-col. Thus:

$(".price-col").each(function () {
            //conteudo da tag td que tem id começando com #preco_
            var valor = $(this).text();
            //encontra a tag tr pai da tag td, depois encontra a tag quantity-col 
            //e retorna o valor do input
            var quantidade = $(this).parent().find('.quantity-col').find('input').val();

            totals += (valor * quantidade);
        });

To show the total amount first modify this html snippet:

<tbody><tr>
    <td>Quantidade:</td>
    <td id="totalQuantidade">0</td>
</tr>

And in function multiply change to:

var quantidades = 0;
        //procura todos os elementos em que o id começa com preco_ e que está dentro de uma td
        $(".price-col").each(function () {
            //conteudo da tag td que tem id começando com #preco_
            var valor = $(this).text();
            //encontra a tag tr pai da tag td, depois encontra a tag quantity-col 
            //e retorna o valor do input
            var quantidade = $(this).parent().find('.quantity-col').find('input').val();

            if(quantidade != ''){
                quantidades = parseInt(quantidade) + quantidades;
            }
            totals += (valor * quantidade);

        });
        $("#totalSoma").text(number_format(totals, '2', ',', '.'));

        $("#totalQuantidade").html(quantidades);