How to calculate total of all row in jquery

debugcn Published at Dev

Majeed

I have some row with some product data.i can add more row dynamically by jQuery, i have calculate total for each row in the end . now I want to calculate grand total of all row. i have tired but it's always show the last row total in grandtotal. please see the picture.

Here is my jquery part.

 //calculation here

$('#dsp').on('input','.ctn',function(){
     var cal=$(this).val();
     var gparent=$(this).closest('.row');
     var unitp=gparent.find('.u_price').val();
     var unitpctn=gparent.find('.unit_pctn').val();
     var pcs=gparent.find('.pcs').val();
    //alert(pcs);
    var total=(((parseInt(unitpctn)*parseInt(cal)) + parseInt(pcs))*parseInt(unitp));

       gparent.find('.t_amt').val(total);

       //grand total
       var gtotal=0;
       var gtotal=parseInt(gtotal)+parseInt(total)
       //alert(gtotal);
       $('#tot').html(gtotal);


});

 $('#dsp').on('input','.pcs',function(){
     var pcs=$(this).val();
     var gparent=$(this).closest('.row');
     var unitp=gparent.find('.u_price').val();
     var unitpctn=gparent.find('.unit_pctn').val();
     var ctn=gparent.find('.ctn').val();
    //alert(pcs);
    var total=(((parseInt(unitpctn)*parseInt(ctn)) + parseInt(pcs))*parseInt(unitp));

       gparent.find('.t_amt').val(total);

       //grand total
       var gtotal=0;
       var gtotal=parseInt(gtotal)+parseInt(total)
       //alert(gtotal);
       $('#tot').html(gtotal);


});

Here is my view part.

   <div id="dsp">
  <div class="row">
    <div class="col-md-2">
      <select name="p_name[]" class="form-control p_name">
      <option value="">-Select Product-</option>
      @foreach($products as $product)
      <option value="{{$product->product_id}}">{{$product->name}}</option>
      @endforeach
    </select>
    </div>
    <div class="col-md-2">
      <input type="text" name="p_code[]" class="form-control p_code">
    </div>
    <div class="col-md-2">
      <input type="text" name="unit_pctn[]" class="form-control unit_pctn" value="0">
    </div>
    <div class="col-md-2">
      <input type="text" name="u_price[]" class="form-control u_price" value="0">
    </div>
    <div class="col-md-1">
      <input type="text" name="ctn[]" class="form-control ctn" value="0">
    </div>
    <div class="col-md-1">
      <input type="text" name="pcs[]" class="form-control pcs" value="0">
    </div>
    <div class="col-md-2">
      <input type="text" name="t_amt[]" class="form-control t_amt" value="0">
    </div>

  </div>&nbsp;
</div>
            <div class="row" id="nep"></div>
             <div class="row">
                       <div class="col-md-10"></div>
                     <div class="col-md-2">GrandTotal:<h5 id="tot">0</h5></div>
                   </div>

Milan Chheda

Here is a small function to help you calculate the grand total:

function getGrandTotal() {
  var total = 0;
  $(".t_amt").each(function() {
    total += parseFloat($(this).val()) || 0;
  });
  return total;
}

You need to call above function on change of individual total OR on updating individual totals. Simply call the function and it would return you grand total.

Collected from the Internet

Please contact [email protected] to delete if infringement.