Подсчитать сумму в input

520
02 июня 2017, 13:04

Есть динамическая таблица после выбора товара заплетаться сумма

<td><input type='text' class='total"+(i+1)+"' name='oll_total[]' value='' ></td>

таких полей может быть много, получается так

<td><input type='text' class='total1' name='oll_total[]' value='100'></td>
<td><input type='text' class='total2' name='oll_total[]' value='200'></td>
<td><input type='text' class='total3' name='oll_total[]' value='300'></td>
<td><input type='text' class='total4' name='oll_total[]' value='400'></td>
<td><input type='text' class='total5' name='oll_total[]' value='500'></td>

пробую сделать так

var i = 1;
var sum= 0;
$("input.total"+i).each(function(){
sum += $(this).val();
});
console.log(sum);

результат = 0; Подскажите как можно подсчитать сумму.

<table class="table table-bordered table-hover table-responsive" id="tab_logic">
                            <thead>
                            <tr>
                                <th width="10%"><?php echo $text_product_name; ?></th>
                                <th width="10%"><?php echo $text_model; ?></th>
                                <th width="10%"><?php echo $text_sum_buy; ?></th>
                                <th width="10%"><?php echo $text_price; ?></th>
                                <th width="10%"><?php echo $text_count; ?></th>
                                <th width="10%"><?php echo $text_in_total; ?></th>
                                <th width="1%"><a id="add_row" ><input type="button" class="btn btn-success" value="<?php echo $text_add_product;?>"></a></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class='addr0'>
                            <tr class='addr1'></tr>
                            </tbody>
                        </table>

`

$(document).ready(function(){
var product = ["<?php echo  $product; ?>"];
var i=1;
    $("#add_row").click(function(){
        $('.addr'+i).html("<td width='10%'><input type='text'  name='product_name[]' autocomplete='on' required class='form' ></td>" +
            "<td width='10%'><input name='model_product[]' class = 'model"+(i+1)+"' type='text'></td>" +
            "<td  width='20%'><input style='width:45%'  type='text' name='price[]' class='price"+(i+1)+"'> <input style='width:45%' readonly type='text' class='currency"+(i+1)+"' name='currency[]' ></td>"+
            "<td width='15%'><input type='text' id='sums' name='total[]' class='total"+(i+1)+"' style='width:90%'><input type='hidden' name='product_id[]'  class='product_id"+(i+1)+"'  ></td>" +
            "<td width='10%'><img src='/catalog/view/theme/default/assets/images/add/minus.png' border='0' onclick='jQuery(this).next().val(~~jQuery(this).next().val()-1); sum_total(this);'>" +
            "<input type='text' name='quantity[]' id=i2  value='' class='quantity"+(i+1)+"' size='1' >" +
            "<img src='/catalog/view/theme/default/assets/images/add/plus.png' border='0' onclick='jQuery(this).prev().val(~~jQuery(this).prev().val()+1);sum_total(this);'></td>" +
            "<td width='10%'><input type='text'  class='total"+(i+1)+"'  name='oll_total[]' value='' ></td>" +
            "<td width='10%'><a id='delete_row' class=' minus' onclick='sum_delete(this)'><input type='button' class='btn btn-danger' value='<?php echo $text_delete_product; ?>'></a></td></td>");
        $('.addr'+i).find('.form').autocomplete({ source:product,
            select: function(event, ui) {
                var product_name  = ui.item.value;
                $.ajax({
                    type: 'POST',
                    url: '/index.php?route=checkout/checkout/autocomplete',
                    data:{ "name_product":product_name },
                    success: function(data){
                        $("input.model"+i).val(data);
                    }
                });
                $.ajax({
                    type: 'POST',
                    url: '/index.php?route=checkout/checkout/total',
                    data:{ "name_model":product_name },
                    success: function(data){
                        $("input.price"+i).val(data);
                    }
                });
                $.ajax({
                    type: 'POST',
                    url: '/index.php?route=checkout/checkout/currency',
                    data:{ "name_model":product_name },
                    success: function(data){
                        $("input.currency"+i).val(data);
                    }
                });
                $.ajax({
                    type: 'POST',
                    url: '/index.php?route=checkout/checkout/price',
                    data:{ "name_model":product_name },
                    success: function(data){
                        $("input.total"+i).val(data);
                    }
                });
                $.ajax({
                    type: 'POST',
                    url: '/index.php?route=checkout/checkout/quantity',
                    data:{ "name_model":product_name },
                    success: function(data){
                        $("input.quantity"+i).val(data);
                    }
                });

                alert($("input.total"+i));
                var sum= 0;
                $("input.total").each(function(){
                    sum += +($(this).val());
                });
                console.log(sum);

               /* var sum= 0;
                $("input.total"+i).each(function(){
                    sum += $(this).val();
                });
                console.log(sum);
                $.ajax({
                    type: 'POST',
                    url: '/index.php?route=checkout/checkout/sum',
                    data: { "sum": sum},
                    success: function (data) {
                        $('.sum_').html(data);
                    }
                });*/
            }
        });
        $('#tab_logic').append('<tr class="addr'+(i+1)+'"></tr>');
        i++;
    });
$("#delete_row").click(function(){
    if(i > 1 ){
        $(".addr"+(i-1)).html('');
        i--;
    }
});

}); jQuery(document).on('click', '.minus', function(){ jQuery( this ).closest( 'tr' ).remove(); }); `

Answer 1

var $total = $('.sub_total'); 
$('[class^="total"]').each(function(){ 
  $total.val(parseInt($total.val()) + parseInt($(this).val())); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type='text' class='total1' name='oll_total[]' value='100'> 
<input type='text' class='total2' name='oll_total[]' value='200'> 
<input type='text' class='total3' name='oll_total[]' value='300'> 
<input type='text' class='total4' name='oll_total[]' value='400'> 
<input type='text' class='total5' name='oll_total[]' value='500'> 
 
<input type='text' class='sub_total' name='oll_total[]' value='0' >

Answer 2
  • Во-первых у тебя все классы разные, а цикл только по total. Логично, что он ничего не находит. А назначать разные классы на одинаковую группу элементов — нецелесообразно.

  • Во-вторых: непонятно откуда из воздуха ты взял переменную i. Если она и должна была быть, то как аргумент функции

    .each(function(i){

  • В-третьих: так как ты и так циклом бежишь по всем элементам, то эта i не нужна вообще (Выше я написал, что нужно делать общий класс на группу элементов total).

var sum= 0; 
$("input.total").each(function(){ 
  sum += +($(this).val());  // sum += parseInt($(this).val());   
}); 
 
console.log(sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<td><input type='text' class='total' name='oll_total[]' value='100'></td> 
<td><input type='text' class='total' name='oll_total[]' value='200'></td> 
<td><input type='text' class='total' name='oll_total[]' value='300'></td> 
<td><input type='text' class='total' name='oll_total[]' value='400'></td> 
<td><input type='text' class='total' name='oll_total[]' value='500'></td>

READ ALSO
полный перебор массива [требует правки]

полный перебор массива [требует правки]

Нужно перебрать массив из трех элементов [1, 2, 3] и на выходе получить массив с 27 перестановкамиКак это можно сделать?

259
Найти точную высоту блока

Найти точную высоту блока

На странице есть div блок с высотой в которой есть дробная частьНапример 450

331
Запуск слайда по условию

Запуск слайда по условию

Подскажите, как сделать так если пользователь перешёл по данной ссылке siteru/index

241
Связка модального окна и jq

Связка модального окна и jq

Имеется модальное окно, к нему приделана форма, хотелось бы понять, почему не получается прикрутить js проверку полей в модальном окне, они...

287