Menu
i have a invoice where i have to calculate some value in the textbox using jquery.
I don't know much about Jquery. Please help me to solve this problem.
In my invoice there is quantity textbox,
if users enters the quantity then dynamically it should show the calculated price i.e
(total_subPrice= unit_price * quantity)in another textbox called "price".
And again the total sum of all the price should be visible in the button as a Total.
please check my below html code and run it in browser then you will understand my problem exactly.
<html>
<body>
<form name="invoice form" action="saveToDatabase.java">
<table border="1" height="30%" width="30%">
<tr>
<td align="center" colspan="5">Customer Invoice</td>
</tr>
<tr>
<td width="5%" bgcolor="#CCCCCC">Sn.no.</td>
<td width="25%" bgcolor="#CCCCCC">Item</td>
<td width="25%" bgcolor="#CCCCCC">Unit Price(In $)</td>
<td width="20%" bgcolor="#CCCCCC">Quantity</td>
<td width="25%" bgcolor="#CCCCCC">Line Total<br/>(Price * Qnty)</td>
</tr>
<tr>
<td width="5%">1</td>
<td width="25%">Iphone 5S</td>
<td width="25%"><input type="text" value="400" name="unitprice1" size="4" disabled></td>
<td width="20%"><input type="text" name="quantity1" value="2" size="2"/></td>
<td width="25%"><input type="text" name="price1" value="400" size="4"/></td>
</tr>
<tr>
<td width="5%">2</td>
<td width="25%">Ipad 2</td>
<td width="25%"><input type="text" value="700" name="unitprice2" size="4" disabled></td>
<td width="20%"><input type="text" name="quantity2" value="1" size="2"/></td>
<td width="25%"><input type="text" name="price2=" value="700" size="4"/></td>
</tr>
<tr>
<td width="5%">1</td>
<td width="25%">mp3</td>
<td width="25%"><input type="text" value="50" name="unitprice1" size="4" disabled></td>
<td width="20%"><input type="text" name="quantity1" value="3" size="2"/></td>
<td width="25%"><input type="text" name="price1" value="150" size="4"/></td>
</tr>
<tr>
<td align="right" colspan="5">Total<input type="text" name="subtotal" value="1250" size="12" disabled/></td>
</tr>
</table>
</form></body>
</html>
234
I enjoy seeing practical examples to learn stuff like jQuery myself, so I made an example for your problem so you can see how it works: http://jsfiddle.net/bozdoz/LGyeq/
Line by line:
Select all of the input tags and call a function if they are changed:
$('input').change(function(){
create a variable to store the totals, to calculate the subtotal:
var linetotals = 0;
select each element with class 'lineTotal' (which I added, so that we could select them):
$('.lineTotal').each(function(){
Get price and quantity by finding the input elements within the same tr element (eq(#) gets the first and second element respectively):
price = $(this).parents('tr').find('input').eq(0).val();
quantity = $(this).parents('tr').find('input').eq(1).val();
Set the lineTotal class element to the new total, and add the total to lineTotals variable:
$(this).val(price*quantity);
linetotals += price*quantity;
});
Set the subtotal to the value of the linetotals variable:
$('#total').val(linetotals);
});
This is one way you can do it. It has a lot to do with preference. Hope this is a good start.
Re: Askers new request for more generalized code
Use CSS Attribute selectors to select the input fields. JSFiddle is updated with the following code:
$('input').change(function(){
var linetotals = 0;
$('[name^="price"]').each(function(){
price = $(this).parents('tr').find('input').eq(0).val();
quantity = $(this).parents('tr').find('input').eq(1).val();
$(this).val(price*quantity);
linetotals += price*quantity;
});
$('[name=subtotal]').val(linetotals);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
