Calculate and sum values in jQuery

Question

I have the following loop:

<?php foreach($order_details as $v_order): ?>
<?php $others_price = $v_order->others_price; ?>

<?php
    $adicional = ($v_order->others_price * count($order_details));
    $vlr_adc = ($adicional / count($order_details));                                    
?>
<tr>
    <td><?php echo $counter ?></td>
    <td><?php echo $v_order->product_name ?></td>
    <td class="media_price_<?php echo $v_order->product_code; ?>"><?php echo $this->localization->currencyFormat($v_order->buying_price); ?></td>
    <td><input type="number" name="product_quantity"  value="<?php echo $v_order->product_quantity ?>" class="form-control product_quantity" data-id="<?php echo $v_order->product_code; ?>" style="width: 75%"></td>
    <td class="total_price_<?php echo $v_order->product_code; ?> linhas"><?php echo $this->localization->currencyFormat($v_order->sub_total) ?></td>
    <td><?php if($counter>1){ ?><button class="btn btn-primary remove_product_<?php echo $v_order->product_code; ?>"><i class="fa fa-minus"></i></button><?php } ?></td>
</tr>
    <?php $counter ++?>
<?php endforeach; ?>

And the next jQuery:

$(".product_quantity").keyup(function(){
    var product_code = $(".product_quantity").data("id");
    var product_quantity = $('.product_quantity').val();
    var media_price = $('.media_price_'+product_code).html();
    var total_price = $('.total_price_'+product_code).html();

    var media_price_r = media_price.replace("R$ ", "");
    var media_price_r2 = media_price_r.replace(/\./g, "").replace(",", ".") || 0;

    var calc = ((parseFloat(media_price_r2))*product_quantity).toFixed(3);
    calc = calc.substr(0, calc.indexOf(".")) + calc.substr(calc.indexOf("."),3);
    calc = parseFloat(calc);
    $('.total_price_'+product_code).html(calc.toLocaleString("pt-BR", { style: "currency" , currency:"BRL"}));

    $(".linhas").each(function(){
        var linhas = $(".linhas").val()
        var linhas_r = linhas.replace("R$ ", "");
        var linhas_r2 = linhas_r.replace(/\./g, "").replace(",", ".") || 0;
        var soma += parseFloat(linhas_r2);        
    })        
    $(".fechado").html(soma);
});

The problem is: When modifying the field product_quantity, should calculate and show to the side, in the total_price. This is done only in the first line, in the others, it is not calculated.

And the second problem would be the sum total of all the values contained in class lines, to present the total value just below:

<h3 class="text-right fechado">Total: <?php echo $this->localization->currencyFormat($order_info->grand_total) ?></h3>

What’s wrong with it?

Answer 1

The code has several problems. One of them is the var soma += parseFloat(linhas_r2);. Using var In the auto-sum variable, you’re redeclaring it at every turn of the loop. When redeclaring it has no initial value and cannot be summed with itself, resulting in error. You have to declare it before the loop with value 0: var soma = 0;, and in the loop without the var.

Here in the loop: var linhas = $(".linhas").val(), instead of ".linhas" should be this, which is the time element in the loop. Using ".linhas" will only take the first element of the class. And you should not use .val(), but yes .text() for being a div, to get the text from the div.

In the same way here:

var product_code = $(".product_quantity").data("id");
var product_quantity = $('.product_quantity').val();

Change the selectors ".product_quantity" for this, to take the values of the element that triggered the event:

var product_code = $(this).data("id");
var product_quantity = $(this).val();

Another thing is that you need to put the ultimate value within one span with class .fechado, to change only the value and not the h3 whole:

<h3 class="text-right">Total: <span class="fechado">R$ 7,00</span></h3>

And in the sum result use also the .toLocaleString to format the result:

$(".fechado").html(soma.toLocaleString("pt-BR", { style: "currency" , currency:"BRL"}));

You also need to use a regex in replace, because the .toLocaleString adds a space using   (HTML entity that creates a space). Using only linhas.replace("R$ ", ""); the   will not be replaced and will cause problem of NaN in the sum. It will look like this:

var linhas_r = linhas.replace(/R\$\s| /, "");

A regex /R\$\s| / will replace the R$ followed both by a simple space (\s) when the  .

Behold:

$(".product_quantity").keyup(function(){
    var product_code = $(this).data("id");
    var product_quantity = $(this).val();
    var media_price = $('.media_price_'+product_code).html();
    var total_price = $('.total_price_'+product_code).html();

    var media_price_r = media_price.replace("R$ ", "");
    var media_price_r2 = media_price_r.replace(/\./g, "").replace(",", ".") || 0;

    var calc = ((parseFloat(media_price_r2))*product_quantity).toFixed(3);
    calc = calc.substr(0, calc.indexOf(".")) + calc.substr(calc.indexOf("."),3);
    calc = parseFloat(calc);
    $('.total_price_'+product_code).html(calc.toLocaleString("pt-BR", { style: "currency" , currency:"BRL"}));

    var soma = 0;
    $(".linhas").each(function(){
        var linhas = $(this).text();
        var linhas_r = linhas.replace(/R\$\s| /, "");
        var linhas_r2 = linhas_r.replace(/\./g, "").replace(",", ".") || 0;
        soma += parseFloat(linhas_r2);        
    })        
    $(".fechado").html(soma.toLocaleString("pt-BR", { style: "currency" , currency:"BRL"}));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
   <tr>
       <td>1</td>
       <td>Prod 2</td>
       <td class="media_price_1">5</td>
       <td><input type="number" name="product_quantity"  value="1" class="form-control product_quantity" data-id="1" style="width: 75%"></td>
       <td class="total_price_1 linhas">R$ 5,00</td>
       <td><button class="btn btn-primary remove_product_1"><i class="fa fa-minus"></i></button></td>
   </tr>
   <tr>
       <td>2</td>
       <td>Prod 1</td>
       <td class="media_price_2">2</td>
       <td><input type="number" name="product_quantity"  value="1" class="form-control product_quantity" data-id="2" style="width: 75%"></td>
       <td class="total_price_2 linhas">R$ 2,00</td>
       <td><button class="btn btn-primary remove_product_2"><i class="fa fa-minus"></i></button></td>
   </tr>
</table>
<h3 class="text-right">Total: <span class="fechado">R$ 7,00</span></h3>