How to update value based on other input box dynamically using jQuery? - javascript

I'm trying to make a shopping cart.
Where I have list of products which has different price.
Now when i tried to change the quantity the price should change based on quantity as well as the total one.
But the problem i'm facing is using the below code when i tried to change the quantity, price get updated but the others also get updated as well though i didn't change the Quantity.
Then total one doesn't show the appropriate total
$(".quantity").change(update);
function update() {
$(".quantity").each(function() {
var qty = Number($(this).val());
var net = document.getElementById("net_price").value;
var total = qty * net;
$('.total').html("$" + total);
$(".grandTotal").text(calculateSum());
});
function calculateSum() {
var sum = 0;
$(".total").each(function() {
var value = $(this).val();
if (!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
});
return sum;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="qty table-default">
<input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
<td class="total_price table-default total"></td>
<td><input type="hidden" id="net_price" value="">45</td>
<td class="grandTotal"></td>
</tr>
</table>
Anyone please help me to find the soultion


If i understand you correctly this may help you
$('body').on('change', ".quantity", update);
function update() {
var qty = parseInt($(this).val());
var net = parseFloat($(this).parents('tr').find(".net_price").val());
var total = qty * net;
$(this).parents('tr').find(".total_price").text("$" + total);
$(".grandTotal").text('$' + calculateSum());
function calculateSum() {
var sum = 0;
$(".total_price").each(function() {
var value = $(this).text().replace('$', '');
if (!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
});
return sum;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="qty table-default">
<td><input type="text" readonly class="net_price" value="25"></td>
<td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
<td class="total_price table-default total"></td>
</tr>
<tr>
<td class="qty table-default">
<td><input type="text" readonly class="net_price" value="25"></td>
<td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
<td class="total_price table-default total"></td>
</tr>
<tr>
<td class="qty table-default">
<td><input type="text" readonly class="net_price" value="25"></td>
<td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
<td class="total_price table-default total"></td>
</tr>
<tr>
<td colsapn="3" class="grandTotal"></td>
</tr>
</table>
Performance Improvement
A performance improvement of above code by extracting calculateSum externally to avoid recreation of same function again and again while calling update method
$('body').on('change', ".quantity", update);
function calculateSum() {
var sum = 0;
$(".total_price").each(function() {
var value = $(this).text().replace('$', '');
if (!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
});
return sum;
}
function update() {
var qty = parseInt($(this).val());
var net = parseFloat($(this).parents('tr').find(".net_price").val());
var total = qty * net;
$(this).parents('tr').find(".total_price").text("$" + total);
$(".grandTotal").text('$' + calculateSum());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="qty table-default">
<td><input type="text" readonly class="net_price" value="25"></td>
<td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
<td class="total_price table-default total"></td>
</tr>
<tr>
<td class="qty table-default">
<td><input type="text" readonly class="net_price" value="25"></td>
<td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
<td class="total_price table-default total"></td>
</tr>
<tr>
<td class="qty table-default">
<td><input type="text" readonly class="net_price" value="25"></td>
<td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
<td class="total_price table-default total"></td>
</tr>
<tr>
<td colsapn="3" class="grandTotal"></td>
</tr>
</table>


You are setting the HTML value for element which is $ concatenated with value but while retrieving the value, you are using .val() method. To get the text from the element, use .text method instead.
As value is prefixed with $, we can not use it for manipulations hence .data method is used to store numerical value in data for particular element.
jQuery.data('key') is used to retrieve the value.
$(".quantity").change(update);
function update() {
$(".quantity").each(function() {
var qty = Number($(this).val());
var net = 10; //Static value is considered
var total = qty * net;
var totalElem = $('.total');
totalElem.html("$" + total);
totalElem.data("value", total);
$(".grandTotal").text(calculateSum());
});
function calculateSum() {
var sum = 0;
$(".total").each(function() {
var value = $(this).data('value');
if (!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
});
return sum;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="qty table-default">
<input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" />
</td>
<td class="total_price table-default total"></td>
<td class="grandTotal"></td>
</tr>
</table>


$(".quantity").change(update);
function update() {
// Cell Variables
var $qty = $(this),
$row = $qty.closest('tr'),
$total = $row.find('.total');
// Number Variables
var qty = Number($qty.val()),
price = $row.find('.price').val(),
total = qty * price;
// Fill Values
$total.html("$" + total);
$('.grandTotal').text('$' + calculateSum());
}
function calculateSum() {
var sum = 0;
$('.total').each(function() {
var strTotal = $(this).text();
var total = parseFloat(strTotal.replace(/^\D+/g, ''));
if (!isNaN(total))
sum += total;
});
return sum;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
<th>Grand Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="qty table-default">
<input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" />
</td>
<td><input type="hidden" class="price" value="45" />$45</td>
<td class="total_price table-default total"></td>
<td class="grandTotal"></td>
</tr>
<tr>
<td class="qty table-default">
<input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" />
</td>
<td><input type="hidden" class="price" value="10" />$10</td>
<td class="total_price table-default total"></td>
<td class="grandTotal"></td>
</tr>
</tbody>
</table>

Related

Auto calculation in jQuery error

.
Iam Try To do calculation column 1 & column 2 and and value inside[] should consider .
so far i am able to calculate particular columns while using split function iam getting error .
eg: in first cell iam having value with [] its calculating correctly if i enter without [] it dosen't doing calculation and shows error
This is my fiddle link
https://jsfiddle.net/hahkarthick/0y0d4vge/2/
$(document).ready(function(){
$('.quantity').on('change, keyup',function(){
var val=$(this).val();
console.log(val)
// To avoid auto inc while pressing arrow keys
var preVal =$(this).data('val');
$(this).data('val',val);
//To avoid auto inc while pressing arrow keys //
if(val =='' || isNaN(val) || val < 1 || val == undefined){
val = 1;
}
$(this).parent().siblings().each(function(){
var oldval = $(this).find('.calc').data("val");
alert(oldval);
var arr = oldval.split("[");
console.log(arr);
//var newval = val * oldval;
var newval = (val * parseFloat(arr[0])).toFixed(2);
console.log(newval);
if(arr.length > 1) {
newval = newval + "[" + arr[1];
}
$(this).find('input').val(newval);
});
autoSum();
});
autoSum();
});
function autoSum(){
var $dataRows=$("#sum_table tr:not('.total, .title')");
var totals=[0,0,0];
$dataRows.each(function() {
$(this).find('input').each(function(i){
totals[i]+=parseFloat( $(this).val());
});
});
$("#sum_table td.totalCol").each(function(i){
$(this).html("total:"+totals[i]);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2>Table calculation</h2>
<p>Calculaton</p>
<table class="auto_sum table table-hover" id="sum_table">
<thead>
<tr class="title">
<th>value1</th>
<th>value2</th>
<th>value3</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input data-val="20[2]" class="calc" type="text" data-val="" value="20[2]" name=""></td>
<td><input class="calc" data-val="[10]" type="number" data-val="" value="10" name=""></td>
<td><input type="number" data-val="" value="10" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr>
<td><input class="calc" type="number" data-val="" value="5" name=""></td>
<td><input class="calc" type="number" data-val="" value="6" name=""></td>
<td><input type="number" data-val="" value="12" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr>
<td><input class="calc" type="number" data-val="" value="45" name=""></td>
<td><input class="calc" type="number" data-val="" value="23" name=""></td>
<td><input type="number" data-val="" value="22" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr class="totalColumn">
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
Thanks in Advance

See fiddle: https://jsfiddle.net/maxbilbow/0y0d4vge/7/
If data-val == "", this can return undefined. I've altered this line:
var oldval = $(this).find('.calc').data("val") || "0";
And, to be safe, cast oldval to String so that the split function works.
var arr = String(oldval).split("[");
I've also specified a class for the siblings:
$(this).parent().siblings('.calc-cell')
$(document).ready(function() {
$('.quantity').on('change, keyup', function() {
var val = $(this).val();
console.log(val)
// To avoid auto inc while pressing arrow keys
var preVal = $(this).data('val');
$(this).data('val', val);
//To avoid auto inc while pressing arrow keys //
if (val == '' || isNaN(val) || val < 1 || val == undefined) {
val = 1;
}
$(this).parent().siblings('.calc-cell').each(function() {
var $calc = $(this).find('.calc');
var oldval = $calc.data("val") || $calc.val() || "0";
var arr = String(oldval).split("[");
console.log(arr);
//var newval = val * oldval;
var newval = (val * parseFloat(arr[0])).toFixed(2);
console.log(newval);
if (arr.length > 1) {
newval = newval + "[" + arr[1];
}
$(this).find('input').val(newval);
});
autoSum();
});
autoSum();
});
function autoSum() {
var $dataRows = $("#sum_table tr:not('.total, .title')");
var totals = [0, 0, 0];
$dataRows.each(function() {
$(this).find('input').each(function(i) {
totals[i] += parseFloat($(this).val());
});
});
$("#sum_table td.totalCol").each(function(i) {
$(this).html("total:" + totals[i]);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2>Table calculation</h2>
<p>Calculaton</p>
<table class="auto_sum table table-hover" id="sum_table">
<thead>
<tr class="title">
<th>value1</th>
<th>value2</th>
<th>value3</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input data-val="20[2]" class="calc" type="text" data-val="" value="20[2]" name="">
</td>
<td>
<input class="calc" data-val="[10]" type="number" data-val="" value="10" name="">
</td>
<td>
<input type="number" data-val="10" value="10" name="">
</td>
<td>
<input class="quantity" type="number" name="">
</td>
</tr>
<tr>
<td class="calc-cell">
<input class="calc" type="number" data-val="5" value="5" name="">
</td>
<td class="calc-cell">
<input class="calc" type="number" data-val="6" value="6" name="">
</td>
<td>
<input type="number" data-val="" value="12" name="">
</td>
<td>
<input class="quantity" type="number" name="">
</td>
</tr>
<tr>
<td>
<input class="calc" type="number" data-val="45" value="45" name="">
</td>
<td>
<input class="calc" type="number" data-val="23" value="23" name="">
</td>
<td>
<input type="number" data-val="" value="22" name="">
</td>
<td>
<input class="quantity" type="number" name="">
</td>
</tr>
<tr class="totalColumn">
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td></td>
</tr>
</tbody>
</table>
</div>

How to generate grand total dynamically using javascript

here i want to create dynamically grand total. i got total of price and quantity. but i cant get grand total to total, so kindly request to solve this, here i have to use php for loop for ten row
function myFunction(time,v) {
var p="price"+time;
var d="demo"+time;
var y = document.getElementById(p).value;
var z = v;
var ans=y*z;
document.getElementById(d).value = ans;
}
function my(time,ans) {
//alert('You have not Login !!');
var p="demo"+time;
var y = document.getElementById(p).value;
//var z=y+ans;
document.getElementById("total").innerHTML = ans;
}
<table>
<?php
$i=0;
while($i<=10)
{
?>
<tr>
<td> <input id="price<?php echo $i; ?>" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="myFunction(<?php echo $i; ?>,this.value)" ></td>
<td><input id="demo<?php echo $i; ?>" type="text" value="0" onChange="my(<?php echo $i; ?>,this.value)" >
</td>
</tr>
<?php
$i++;
}?>
<h4> Total :- <span id = "total"></span></h4>
</table>

Store your Total count globaly, and Get all elements of your "demo" by querySelector and then calculate them.
Check snippest.
var _mytotal=0;
function _Function1(time,v)
{
var p="price"+time;
var d="demo"+time;
var y = document.getElementById(p).value;
var z = v;
var ans=y*z;
document.getElementById(d).value = ans;
_mytotal=0;
_Function2();
}
function _Function2()
{
var demos = document.querySelectorAll('*[id^="demo"]');
demos.forEach(_FunctionTotal);
}
function _FunctionTotal(item)
{
_mytotal = +_mytotal + +document.getElementById(item.id).value;
document.getElementById("total").textContent = _mytotal;
}
<table>
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td><input id="price0" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(0,this.value)" ></td>
<td><input id="demo0" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><input id="price1" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(1,this.value)" ></td>
<td><input id="demo1" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><input id="price2" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(2,this.value)" ></td>
<td><input id="demo2" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><input id="price3" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(3,this.value)" ></td>
<td><input id="demo3" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><input id="price4" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(4,this.value)" ></td>
<td><input id="demo4" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><h4>Grand Total</h4></td>
<td> </td>
<td><h4><span id = "total"></span></h4></td>
</tr>
</table>

Set textbox to zero when other textbox is empty or user input zero

I have here a table that automatically compute the total cost base on the
quantity you entered.
My problem is every time I try to remove the value in quantity the total cost value
from the previous quantity is still there instead of "0". I just want it to response like this :
If the quantity textbox has a value total cost will compute and
if the user remove the value in quantity the total cost will display
"0".
Any help would be much appreciated!
Thank you.
Here's what I have so far.
HTML
<table style="border:1px solid purple">
<tr>
<th style="font-size:9px;">COST</th>
<th style="font-size:9px;">QTY</th>
<th style="font-size:9px;">TOTAL</th>
</tr>
<tr id="Tr1">
<td><input class="price" type="text" name="price[]" value="100.00"></td>
<td><input class="qty" type="text" name="qty[]" ></td>
<td><input type="text" class="output" name="output[]"></td>
</tr>
<tr id="Tr2">
<td><input class="price" type="text" name="price[]" value="100.00"></td>
<td><input class="qty" type="text" name="qty[]" ></td>
<td><input type="text" class="output" name="output[]"></td>
</tr>
<tr id="Tr3">
<td><input class="price" type="text" name="price[]" value="100.00"></td>
<td><input class="qty" type="text" name="qty[]" ></td>
<td><input type="text" class="output" name="output[]"></td>
</tr>
<tr id="Tr4">
<td><input class="price" type="text" name="price[]" value="100.00"></td>
<td><input class="qty" type="text" name="qty[]" ></td>
<td><input type="text" class="output" name="output[]"></td>
</tr>
</table>
JavaScript
$(document).ready(function() {
$(this).keyup(function() {
var grandTotal = 0;
$("input[name='price[]']").each(function (index) {
var price = $("input[name='price[]']").eq(index).val();
var qty = $("input[name='qty[]']").eq(index).val();
var output = parseInt(price) * parseInt(qty);
if (!isNaN(output)) {
$("input[name='output[]']").eq(index).val(output);
}
});
});
});
Sample here : https://jsfiddle.net/bqwnw9Lk/1/

modified jsvascript is below, try this..
$(document).ready(function() {
$(this).keyup(function() {
var grandTotal = 0;
$("input[name='price[]']").each(function (index) {
var price = $("input[name='price[]']").eq(index).val();
var qty = $("input[name='qty[]']").eq(index).val();
if( qty == ""){
output = 0;
}
else{
var output = parseInt(price) * parseInt(qty);
}
if (!isNaN(output)) {
$("input[name='output[]']").eq(index).val(output);
}
});
});
});
If u want to keep the output field empty for empty quantity field then You can set
output= "" instead of output =0;

How to use onchange event?

This is my code where if i put quantity then it will calculate it and show it in total amount. my problem is that if i change my quantity in between process my total amount is not change.
How to do it onchange quantity total amount have to different
<script>
function valid(obj)
{
var frm=document.getElementById("frm");
var qty=parseInt(document.getElementById("quantity").value);
var price=parseInt(obj.value);
var total=parseInt(document.getElementById("total").value);
if(isNaN(total))
{
total=0;
}
if(obj.checked==true)
{
total=total+(qty*price);
document.getElementById("total").value=total;
}
else
{
total=total-(qty*price);
document.getElementById("total").value=total;
}
/*for(var i=0;i<frm.length;i++)
{
if(frm[i].type=="checkbox")
{
if(frm[i].checked==true)
{
total=total+(parseInt(frm[i].value)*qty);
}
}
}*/
document.getElementById("total").value=total
}
</script>
<form action="abc.html" method="post" id="frm" onsubmit="return valid(this);">
<table>
<tr>
<th colspan="2">Qualification</th>
</tr>
<tr>
<td><input type="checkbox" name="check_list[]" value="1000" onClick="valid(this);" /></td><td>BCA</td>
<td><input type="checkbox" name="check_list[]" value="2000" onClick="valid(this);" /></td><td>MCA</td>
</tr>
<tr>
<td><input type="checkbox" name="check_list[]" value="1200" onClick="valid(this);" /></td><td>BBA</td>
<td><input type="checkbox" name="check_list[]" value="1000" onClick="valid(this);" /></td><td>MBA</td>
</tr>
<tr>
<td colspan="2"><input type="text" name="quantity" id="quantity" placeholder="Quantity"></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="total" id="total" value="" placeholder="Total"></td>
</tr>
<tr>
<td colspan="2"><input type="button" onClick="valid();" name="submit" value="Send" /></td>
</tr>
</table>
</form>

Define var isFormSubimited = false;
Set isFormSubimited = true in valid function.
Add "onchange='onQuantityChange()'" to quantity input element.
Add following function.
function onQuantityChange()
{
if(isFormSubimited && $("input[type='checkbox']:checked").length > 0)
{
//var _form = document.getElementById('frm');
//_form.submit();
valid();
}
}

Using the same jQuery in multiple operations

I have a small question and I hope someone can help me with it :D
I’m trying to create a product table, in which a user just add the quantity of a product and the jquery makes the multiplication to its value and gives the result
I already made this, and it works well:
<script>
$(document).ready(function(){
$('#quantity_1').keyup(function(){
var price_1 = $("#price_1").val();
var quantity_1 = $("#quantity_1").val();
quantity_1 = quantity_1.replace(/[^0-9]+/g, '');
$("#quantity_1").val(quantity_1);
var total_1 = price_1 * quantity_1;
$( "#total_1" ).val( total_1.toFixed(2) );
});
});
</script>
<table border="1" cellpadding="5px" cellspacing="0" >
<tr>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr>
<td>Product Name</td>
<td><input type="hidden" name="product[1][price]" id="price_1" value="10.00" />10.00</td>
<td><input type="text" name="product[1][quantity]" id="quantity_1" /></td>
<td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
</tr>
</table>
Working demo here:
http://jsfiddle.net/EnterateNorte/9kswL0gf/
But I would like to be able to add more than one line, like so:
<table border="1" cellpadding="5px" cellspacing="0" >
<tr>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr>
<td>Name 1</td>
<td><input type="hidden" name="product[1][price]" id="price_1" value="10.00" />10.00</td>
<td><input type="text" name="product[1][quantity]" id="quantity_1" /></td>
<td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
</tr>
<tr>
<td>Name 5</td>
<td><input type="hidden" name="product[5][price]" id="price_5" value="10.00" />23.00</td>
<td><input type="text" name="product[5][quantity]" id="quantity_5" /></td>
<td><input type="text" name="product[5][total]" id="total_5" value="0" /></td>
</tr>
<tr>
<td>Name 3</td>
<td><input type="hidden" name="product[3][price]" id="price_3" value="130.00" />10.00</td>
<td><input type="text" name="product[3][quantity]" id="quantity_3" /></td>
<td><input type="text" name="product[3][total]" id="total_3" value="0" /></td>
</tr>
<tr>
<td>Name 4</td>
<td><input type="hidden" name="product[4][price]" id="price_4" value="12.00" />10.00</td>
<td><input type="text" name="product[4][quantity]" id="quantity_4" /></td>
<td><input type="text" name="product[4][total]" id="total_4" value="0" /></td>
</tr>
</table>
And if it isn’t to much trouble, I would be awesome if it would SUM all the totals and show a gran total at the end of the table :)

Use:
$(document).ready(function(){
$('[name*=quantity]').keyup(function(){
var price = $(this).parent().prev().find('input').val();
var quantity = $(this).val();
var total = price * quantity;
$(this).parent().next().find('input').val( total.toFixed(2) );
});});
Working Demo
Update: For showing Grand Total
var sum = 0;
//iterate through each textboxes and add the values
$('[name*=total]').each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseInt(this.value);
}
});
Working Demo

What you can do is to find the elements using their relative position instead of hard coded ids
$(document).ready(function () {
$('input[id^="quantity_"]').keyup(function () {
var $tr = $(this).closest('tr');
var price = $tr.find('input[id^="price_"]').val();
var quantity = this.value;
var total = (price * quantity) || 0;
$tr.find('input[id^="total_"]').val(total.toFixed(2));
});
});
Demo: Fiddle

I've updated your code in Fiddle. You need to change in your markup a bit.
<tr>
<td>Product Name</td>
<td><input type="hidden" class="price" ... />10</td>
<td><input type="text" class="quantity" ... /></td>
<td><input type="text" class="total" ... /></td>
</tr>
$(document).ready(function(){
$('.quantity').keyup(function(){
var parent = $(this).closest("tr");
var price = $(".price", parent).val();
var quantity = $(".quantity", parent).val();
var total = price * quantity;
$(".total", parent).val(total.toFixed(2));
});
});

I would recommend you to use common class
HTML:
<tr>
<td>Name 5</td>
<td>
<input type="hidden" class="price" value="10.00" />10.00</td>
<td>
<input type="text" class="quantity" />
</td>
<td>
<input type="text" class="total" value="0" />
</td>
</tr>
<tr>
<td>Name 3</td>
<td>
<input type="hidden" class="price" value="130.00" />130.00</td>
<td>
<input type="text" class="quantity" />
</td>
<td>
<input type="text" class="total" value="0" />
</td>
</tr>
Script:
$('.quantity').keyup(function () {
var tr = $(this).closest('tr');
var price = tr.find('.price').val();
var quantity = $(this).val();
var total = price * quantity;
tr.find('.total').val(total.toFixed(2));
});
DEMO

Modify your table:
<table border="1" cellpadding="5px" cellspacing="0" id='table' >
<!-- your rows with inputs -->
<tr>
<td>
<input id='totalSum' value='0' type='text' />
</td>
</tr>
</table>
Make all your 'total' inputs readonly by adding 'readonly' attribute.
js code:
$(document).ready(function(){
$('[name*=quantity]').keyup(function(){
var total = 0;
$('#table tr').each(function(i,item){
var price = parseFloat($(item).find('[name*=price]').val().replace(',','.'));
var quantity = parseInt($(item).find('[name*=quantity]').val());
if(!isNaN(price) && !isNan(quantity)){
total += price*quantity;
}
});
$("#totalSum").val(total.toFixed(2));
});
});

Categories

Resources