CODEWITHSUNDEEP
javascriptjquery
User57
User57

Reputation: 2505

How to show total of dynamically added column using jquery

I have made a shopping cart where I added row based on autocomplete search. and based on quantity price changed. But I want to find the total of subtotal..I have written the update part. But it's showing 0 instead of actual value. Can anyone help me to find it out what's the wrong in my jQuery code..Thank You!

 $('#searchName').autocomplete({
                source: '{!! asset('nameAutocomplete') !!}',
                select:function(suggestion,ui){
                    event.preventDefault();       
                        var $tbody = $('#example tbody');
                        $tbody.append('<tr><td class="id">' + ui.item.id +
                        '</td><td class="name">' + ui.item.value +
                        '</td><td class="price">' + ui.item.price +
                        '</td><td><input type="text" class="quantity" value="1"/></td><td><input type="text" class="total" readonly value="'+ui.item.price+'" class="readonly"/></td></tr>');
                        $('.quantity').on('keyup',function(){
                            var tot = $(this).parent().prev().html() * this.value;
                           $(this).parent().next().find('.total').val(tot);  
                      console.log(calculateSum());    
                        });
                       function calculateSum(){
                        var sum = 0;
                    $(".total").each(function() {
                        var value = $(this).text();
                        // add only if the value is number
                        if(!isNaN(value) && value.length != 0) {
                            sum += parseFloat(value);
                        }
                        });
                    return sum;
                    }               
                   }                   
            });

Here is table part :

<table  class="table table-striped table-bordered"  id="example">
                    <thead>
                      <tr>                      
                        <td>ID</td>
                        <td>Name</td>
                        <td>Price</td> 
                        <td>Quantity</td>
                        <td>Total</td>                     
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>

Upvotes: 0

Views: 63

Answers (1)

br3t
br3t

Reputation: 1658

$(".total") is an input, so you should use var value = $(this).val();, not var value = $(this).text();

Upvotes: 1

Related Questions