CODEWITHSUNDEEP
jquery
xrcwrn
xrcwrn

Reputation: 5327

Showing the sum of all price text box(`class=price`) in to subTotal textbox(`id=subTotal`)

I am having following html table structure

<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>

There may be an no of <tr class="row">(generated dynamically) each table row is identified by its id itemXX XX is number.

Here I reading barcode of product then its detail is filled in appropriate text boxes. Then when I changes the quantity of product its corresponding price is updated in text box with `class="price"'.

My question is when any products price is changed or entered in price text box. The sum of all products price should be shown in subTotal text box.

Upvotes: 0

Views: 1431

Answers (4)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

You can get the sum by using the following code i provided, But make sure that you have to wrap the following code inside a function and call it possibly, in all situation(In blur,change events etc. Basically textbox's change event occurs when it lose focus.) when price text box changes. 

var xSubTotal = 0;

$("tr.row input[name='price']").each(function(){
 xSubTotal += $(this).val();
});

$("#subTotal").val(xSubTotal);

Upvotes: -1

Sico
Sico

Reputation: 1183

Attach Jquery $table.on('change', 'td.price', function ...) to detect the change in each price field and then within the callback function use a $.each on 'td.price' to sum

Upvotes: 0

user1636522
user1636522

Reputation:

Try this :

var $inputs = $('input[name=price]');
$inputs.change(function () {
    var sum = 0;
    $inputs.each(function () { 
        sum += +$(this).val() || 0; 
    });
    $('#subTotal').val(sum);
});

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388406

Try

$('table').on('change', '.row input[name="price"]', function () {
    var total = 0;
    $('.row input[name="price"]').each(function () {
        total += parseFloat(this.value)
    });
    $('#subTotal').val(total);
})

if the value of the price field is changed by a script then trigger the change event also like

.val(x).change()

Upvotes: 1

Related Questions