Geek Answers Handbook

Calculating qty price for each row using grandtotal using jquery

I am trying to make an invoice script in which I need to perform some calculations. The user will enter the qty field and the price field. The system should multiply qty * price and display quantities in the field. The total amount should be indicated in the grant field. I tried to browse and do something below. It works fine with <span>, but when I give a text box, it does not work. I am very new to jquery and iam without getting where I am making a 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 looks like this:

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

Script Link

Or is there a better way to get closer to the same. Pls help me with this.

+4
source share
6 answers

. . .

, , span. .val(), .:

$(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);
}
});//]]>

0

:

<span>, , .

val(), .

,

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

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
}
+2

sum += amount;


if(amount)sum += amount;


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


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


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


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


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

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

+2

tr .each, .each . ...

$(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>
Hide result
+1

Check if qauntity is set to tr or not, and then perform the operation. here: https://jsfiddle.net/864wLn3b/ Try the following:

Please provide different identifiers for the full range and full text field so that you can distinguish 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);
}
0
source

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

Here is a working example. You have a range and inputs with the same class and this will ruin your code. Example:

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

So, when you search for an element by class, you get either a range or input.

0
source

More articles:


All Articles