Auto Calculation input array in Jquery

Question

In my form, all columns work well except the grand total's column.

I have 3 constant rows to let user select the item and will auto calculate the Total Price.

Grand Total is the sum of the totalamtincltax, but it cannot auto calculate. Hope you guys can help. Thank You.

View:This is part of my view

<!-- **************************** START OF ITEM LIST 3 ************************   -->
                     <tr class="item-details">
                        <td><span class="rowNumber">3</span></td>
                         <td class="">
                        <?php
                        $options = array(
                                         '' => '~Choose An Item~'
                                         );
                        foreach ($item as $rows){
                            $options[$rows->id] = $rows->item_name;
                        }

                        $select = array(

                                        'id' => 'item_id',
                                        'class' => 'form-control'
                                        );
                        echo form_dropdown('item_id[]', $options,set_value('item_name'),$select);
                        ?>
                        </td>
                        <td class=""><input type="number" id="qty[]" class="item-qty" name="qty[]" min="0.00"/></td>
                        <td><input type="number" name="weight[]" class="weight" step="any" /></td>
            <td><input type="number" name="transportation[]" class="transporation" step="any"/></td>
            <td><input type="text" id="gp[]"  name="gp[]" value="" /></td>
                        <td><input type="text" id="discount[]"  name="discount[]" value="" /></td>
                        <td><input type="text" id="unit_price[]"  name="unit_price[]" value="" /></td>
                        <td align="right">
            <input type="text" id="totalwithouttax[]" name="totalwithouttax[]" value="" readonly>
            </td>
            <td align="right">
            <input type="text" id="totaltax[]" name="totaltax[]" value="" readonly>
            </td>
            <td align="right">
            <input type="text" id="totalamtincltax[]" name="totalamtincltax[]" value="" readonly>
            </td>
                     </tr><br/><br><br><br>
         <tr align="right" class="item-details">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td align="right"><strong>Grand Total</strong></td>
            <td><input type="text" id="grandtotal" name="grandtotal" value="" readonly></td>
         </tr>

Jquery: (Updated!)

$(document).ready(function(){
  $('input[name^="qty"],input[name^="transportation"],input[name^="gp"],input[name^="discount"],input[name^="unit_price"],input[name^="totalwithouttax"],input[name^="totaltax"],input[name^="totalamtincltax"],input[name=grandtotal]').change(function()  {
      //alert("The text has been changed.");
                        var totalwithouttax = 0;
                        var totaltax = 0;
                        var totalamtincltax = 0;
                        var grandtotal = 0;
      var $row = $(this).closest(".item-details"); //<table> class
      var qty = parseInt($row.find('input[name="qty[]"]').val());
      var transportation = parseFloat($row.find('input[name="transportation[]"]').val());
      var gp = parseFloat($row.find('input[name="gp[]"]').val());
      var discount = parseFloat($row.find('input[name="discount[]"]').val());
      var unitPrice = parseFloat($row.find('input[name="unit_price[]"]').val());

      totalwithouttax = ((transportation + gp + unitPrice - discount) * qty) || 0;
      $row.find('input[name="totalwithouttax[]"]').val(totalwithouttax);
                        totaltax = 0;
                        $row.find('input[name="totaltax[]"]').val(totaltax);
                        totalamtincltax = totalwithouttax + totaltax;
                        $row.find('input[name="totalamtincltax[]"]').val(totalamtincltax);
                        grandtotal = totalamtincltax || 0;
                        $row.find('input[name="grandtotal"]').val(grandtotal);          
    });
  });

Answer 1

There's a mismatch with your form name and your find

Try:

$row.find('input[name="grandtotal"]').val(grandtotal);  

This should fix the issue, and please declare your variables properly, grandtotal is not defined in your Jquery code. (no var)

P.S. (not related to the question/answer) but why you have [] in your form names/id.

Answer 2

$(document).ready(function() {
    $('input[name^="qty"],input[name^="transportation"],input[name^="gp"],
        input[name ^= "discount"], input[name ^= "unit_price"], input[name ^= "totalwithouttax"],
        input[name ^= "totaltax"], input[name ^= "totalamtincltax"],
        input[name ^= "grandtotal"]
        ').change(function()  {
        //alert("The text has been changed.");
        var totalwithouttax = 0;
        var totalamtincltax = 0;
        var $row = $(this).closest(".item-details"); //<table> class
        var qty = parseInt($row.find('input[name="qty[]"]').val());
        var transportation = parseFloat($row.find('input[name="transportation[]"]').val());
        var gp = parseFloat($row.find('input[name="gp[]"]').val());
        var discount = parseFloat($row.find('input[name="discount[]"]').val());
        var unitPrice = parseFloat($row.find('input[name="unit_price[]"]').val());

        totalwithouttax = ((transportation + gp + unitPrice - discount) * qty) || 0; $row.find('input[name="totalwithouttax[]"]').val(totalwithouttax);
        var totaltax = 0.00; $row.find('input[name="totaltax[]"]').val(totaltax); totalamtincltax = totalwithouttax + totaltax; $row.find('input[name="totalamtincltax[]"]').val(totalamtincltax);
        var grandtotal = totalamtincltax || 0; $row.find('input[name="grandtotal[]"]').val(grandtotal);
    });
});

  

定义var totalamtincltax = 0;并且var totaltax = 0.00; var grandtotal = 0;