Rich_C wrote:
I'm sure this is very simple, but I have very little experience with
javascript -- and what I do know isn't helping me here.
I have a simple form where users can enter a quantity (qty) and cost
(cost). Users can dynamically add rows to the table so I don't know
how many rows might need to be calculated.
I need to calculate the total (qty * cost) and put that number in a
table cell (or read only input box). I also need to sum the totals for
a grand total.
Below is something that should help. Note that you must validate input
before trying to do maths with it. Presuming you are using $ and
cents, work in whole cents internally, display as $ only for output -
same for any other currency. Read the FAQ on rounding and maths in
JavaScript - unless you *want* to work in decimal cents, in which case
you'd better decide how many decimal places you want to work to, then
bone-up on rounding and the precision of maths in JavaScript (there are
many posts in the archives).
And remember that anyone with JavaScript disabled or not available
won't see the results.
<!-- Note that form must be cleared of values on page load,
or change function to update entire table onload and onchange
-->
<body onload="document.forms[0].reset();">
<script type="text/javascript">
// Updates row where input changed, re-calcs grand total
function update(el)
{
// Get the parent TR
var tr = el.parentNode;
while (tr.nodeName.toLowerCase() != 'tr'){
tr = tr.parentNode;
}
// Get the qty and cost values from the inputs
var qty = tr.cells[0].getElementsByTagName('input')[0].value;
var cost = tr.cells[2].getElementsByTagName('input')[0].value;
/* code here to validate input of qty and cost as
integer or float as appropriate
*/
// Do all arithmatic in cents or equivalent in whatever
// decimal currency is being used
var total = Math.round(qty*cost*100);
// Display total formatted for decimal currency
tr.cells[3].innerHTML = cToD(total);
// Do grand total
var rows = tr.parentNode.rows;
var i = rows.length;
var gTotal = 0;
while (i--){
gTotal += rows[i].cells[3].innerHTML * 100;
}
document.getElementById('grandTotal').innerHTML = cToD(gTotal);
}
// Simple function to convert decimal currency
function cToD(c)
{
if (c<10) return '0.0' + c;
if (c<100) return '0.' + c;
c += '';
return (c.substring(0,c.length-2)) + '.'
+(c.substring(c.length-2));
}
</script>
<form action="purchase_req1.asp" method="post" name="purchreq"
onsubmit="return validate();">
<table id="itemlist">
<thead align="left">
<th>Qty</th>
<th>Description</th>
<th>Cost $</th>
<th>Total $</th>
</thead>
<!-- This table section holds the items, it needs to be independent
of other table sections
-->
<tbody id="items">
<tr>
<td valign="top" height="15"><input type="text" name="qty"
size="4" onchange="update(this);"></td>
<td valign="top" height="15"><textarea name="desc" rows="4"
cols="40"></textarea>
<td valign="top" height="15"><input type="text" name="cost"
size="6" onchange="update(this);"></td>
<td valign="top" height="15" align="right"></td>
</tr>
<tr>
<td valign="top" height="15"><input type="text" name="qty"
size="4" onchange="update(this);"></td>
<td valign="top" height="15"><textarea name="desc" rows="4"
cols="40"></textarea>
<td valign="top" height="15"><input type="text" name="cost"
size="6" onchange="update(this);"></td>
<td valign="top" height="15" align="right"></td>
</tr>
</tbody>
<!-- This table section holds the grand total, it needs to be
independent of other table sections
-->
<tbody>
<tr>
<td colspan="3" height="15"><b>Grand Total</b></td>
<td valign="top" height="15" id="grandTotal" align="right">0</td>
</tr>
</tbody>
</table>
</form>
</body>
--
Rob
