Pages

Tuesday, September 15, 2015

Calculate sub total of all rows values having textbox in each row


http://stackoverflow.com/questions/20159426/showing-the-sum-of-all-price-text-boxclass-price-in-to-subtotal-textboxid


-----------HTML----------------

<tr class="row" id="item10">
 <td><input type="text" name="barcode" class="barcode" style="width: 50px"/></td>
 <td><input type="text" name="type" class="type" readonly="true" style="width: 50px"/></td>
 <td><input type="text" name="color" class="color" readonly="true" style="width: 50px"/></td>
 <td><input type="text" name="qty" class="qty" style="width: 50px"/></td>
 <td><input type="text" name="unitprice" readonly="true"  class="unitPrice" style="width: 50px"/></td>
 <td><input type="text" name="price" class="price" style="width: 50px"/></td>
 </tr>

<tr class="row" id="item10">
 <td><input type="text" name="barcode" class="barcode" style="width: 50px"/></td>
 <td><input type="text" name="type" class="type" readonly="true" style="width: 50px"/></td>
 <td><input type="text" name="color" class="color" readonly="true" style="width: 50px"/></td>
 <td><input type="text" name="qty" class="qty" style="width: 50px"/></td>
 <td><input type="text" name="unitprice" readonly="true"  class="unitPrice" style="width: 50px"/></td>
 <td><input type="text" name="price" class="price" style="width: 50px"/></td>
 </tr>

<tr  id="SubTotal">
     <td colspan="5">SubTotal</td>
      <td><input type="text" name="subTotal" id="subTotal" style="width: 50px"/></td>
  </tr>
    <tr  id="VAt">
        <td colspan="5">Vat</td>
         <td><input type="text" name="vat" id="vat" style="width: 50px"/></td>
     </tr>
     <tr  id="Total">
          <td colspan="5">Total</td>
            <td><input type="text" name="Total" id="Total" style="width: 50px"/></td>
     </tr>


---- jQuery

var $inputs = $('input[name=price]');
$inputs.change(function () {
    var sum = 0;
    $inputs.each(function () {
        if($(this).val()>10)
        {
           $(this).css('border','solid 1px #ee0000');
        }
        else
          {
           $(this).css('border','solid 1px #000000');
        }
        sum += +$(this).val() || 0;
    });
    $('#subTotal').val(sum);
});