CODEWITHSUNDEEP
jquery
Sanju Menon
Sanju Menon

Reputation: 729

Calculation of qty price for each rows with a grandtotal using jquery

I am trying to do a invoice script in which i need to do some calculations. The user will enter the qty field and price field. The system has to multiply qty*price and show in amount field. The total of amount should be shown in grandtotal field. I tried to browse and did something below. Its working fine with <span> but when i give a text box its not working. Iam very new to jquery and iam not getting where iam making mistake.My html is as follows:

<table id="myTable">
    <thead>
        <tr><th>Product name</th><th>Qty</th><th>Price</th>
    <th align="center"><span id="amount" class="amount">Amount</span> </th></tr>
    </thead>
    <tfoot>
        <tr><td colspan="2"></td><td align="right"><span id="total" class="total">TOTAL</span> </td></tr>
    </tfoot>
    <tbody>

    <tr>
    <td>Product 1</td><td><input type="text" class="qty" name="qty"></td>
    <td><input type="text" value="11.60" class="price"></td>
    <td align="center"><input type="text" class="amount" id="amount"><span id="amount" class="amount">0</span></td>
    </tr>

<tr><td>Product 2</td><td><input type="text" class="qty" name="qty"></td>
<td><input type="text" value="15.26" class="price"></td>
<td align="center"><input type="text" class="amount" id="amount"><span id="amount" class="amount">0</span></td></tr>
<tr><td></td><td></td><td></td><td><input type="text" class="total" id="total"></td></tr>
</tbody></table>

My jquery is as follows:

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function(){

    update_amounts();
    $('.qty').change(function() {
        update_amounts();
    });
});


function update_amounts()
{
    var sum = 0.0;
    $('#myTable > tbody  > tr').each(function() {
        var qty = $(this).find('.qty').val();
        var price = $(this).find('.price').val();
        var amount = (qty*price)
        sum+=amount;
        $(this).find('.amount').text(''+amount);
    });
    //just update the total to sum  
    $('.total').text(sum);
}
});//]]> 

</script>

Link To Fiddle

Or is there a better way to approach the same. Pls help me on this.

Upvotes: 4

Views: 2236

Answers (6)

Manjeet Barnala
Manjeet Barnala

Reputation: 2995

You just need to skip the last tr element in your .each function, for this i have taken common class for both the products and run .each for each product and calculated the amount. Try this...

$(window).load(function(){
$(document).ready(function(){

    update_amounts();
    $('.qty').change(function() {
        update_amounts();
    });
});

function update_amounts()
{
    var sum = 0.0;
    $('.product').each(function() {
        var qty = $(this).find('.qty').val();
        var price = $(this).find('.price').val();
        var amount = (qty*price)
        //alert(amount);
		sum+= amount;
        $(this).find('.amount').val(amount); 
    });
	$('.total').val(sum);
	//just update the total to sum  
   
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
    <thead>
        <tr><th>Product name</th><th>Qty</th><th>Price</th>
    <th align="center"><span id="amount" class="amount">Amount</span> </th></tr>
    </thead>
    <tfoot>
        <tr><td colspan="2"></td><td align="right"><span id="total" class="total">TOTAL</span> </td></tr>
    </tfoot>
    <tbody>

    <tr class="product">
    <td>Product 1</td><td><input type="text" class="qty" name="qty"></td>
    <td><input type="text" value="11.60" class="price"></td>
    <td align="center"><input type="text" class="amount" id="amount"><span id="amount" class="amount">0</span></td>
    </tr>

<tr class="product"><td>Product 2</td><td><input type="text" class="qty" name="qty"></td>
<td><input type="text" value="15.26" class="price"></td>
<td align="center"><input type="text" class="amount" id="amount"><span id="amount" class="amount">0</span></td></tr>
<tr><td></td><td></td><td></td><td><input type="text" class="total" id="total"></td></tr>
</tbody></table>

Upvotes: 1

Aurelian
Aurelian

Reputation: 15

https://jsfiddle.net/AurelianCtin/tb6t5dw1/23/

Here is a working example. You have span's and inputs with same class and it's messing up you're code. Example:

<span id="total" class="total">TOTAL</span>
<input type="text" class="total" id="total">

So when you are searching for a element by class , you get either the span or input.

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

You have not iterated over correct rows. and haven't parsed values correctly before doing multiplication. Which is a bad practice.

Also you also have same class of that of input element to span element.You have to target only input element along with .val() to get set its value.:

$(document).ready(function(){
update_amounts();
$('.qty').change(function() {
    update_amounts();
});
function update_amounts(){
var sum = 0.0;
$('#myTable > tbody  > tr:not(:last)').each(function() {
    var qty = parseFloat($(this).find('.qty').val() || 0,10);
    var price = parseFloat($(this).find('.price').val() || 0,10);
    var amount = (qty*price)
    sum+=amount;
    $(this).find('input.amount').val(amount);
});
//just update the total to sum  
$('input.total').val(sum);
}
});//]]>

Working Demo

Upvotes: 0

trex005
trex005

Reputation: 5115

Change

sum += amount;

To

if(amount)sum += amount;

AND

$(this).find('.amount').text(''+amount);

To

$(this).find('.amount').val(''+amount);

AND

$('.total').text(sum);

To

$('.total').val(sum);

AND get rid of 

$(window).load(function(){}

Fiddle: https://jsfiddle.net/trex005/cwvLgouz/

Upvotes: 2

Shaunak D
Shaunak D

Reputation: 20626

Answering this query from your question :

Its working fine with <span> but when i give a text box its not working.

For inputs use val() to assign values.

in your case,

$('.total').val(sum);

Updated Fiddle

function update_amounts() {
  var sum = 0.0;
  $('#myTable > tbody  > tr').each(function() {
    var qty = $(this).find('.qty').val();
    var price = $(this).find('.price').val();
    var amount = parseFloat(qty) * parseFloat(price);
    amount = isNaN(amount) ? 0 : amount;  //checks for initial empty text boxes
    sum += amount;
    $(this).find('.amount').text('' + amount);
    $(this).find('.amount').val('' + amount);  // for inputs/textbox
  });
  //just update the total to sum  
  $('.total').text(sum);
  $('.total').val(sum);  // for inputs/textbox
}

Upvotes: 2

Dhara Parmar
Dhara Parmar

Reputation: 8101

Check if qauntity is set in tr or not then only perform operation. check here: https://jsfiddle.net/864wLn3b/ Try this:

Please give different ids for total span and total textbox, so that you can differentiate between them

function update_amounts()
{
    var sum = 0.0;
    $('#myTable > tbody  > tr').each(function() {
        if($(this).find('.qty').val() != '' && $(this).find('.qty').length  != 0 ) {
        var qty = $(this).find('.qty').val();
        var price = $(this).find('.price').val();
        var amount = (qty*price)
        sum+=amount;
        $(this).find('.amount').text(''+amount);
        $(this).find('#amount_input').val(amount);
        }
    });
    //just update the total to sum  
    $('.total').val(sum);
}

Upvotes: 0

Related Questions