473,973 Members | 1,791 Online

# how to calculate row total in dynamic form?

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.

can someone point me in the right direction?
<form action="purchas e_req1.asp" method="post" name="purchreq"
onsubmit="retur n validate();">
<table id="itemlist" width="100%">
<tr>
<td valign="top" height="15"><in put type="text" name="qty"
size="4"></td>
<td valign="top" height="15"><te xtarea name="desc" rows="4"
cols="40"></textarea>
<td valign="top" height="15"><in put type="text" name="cost"
size="6"></td>
<td valign="top" height="15">[PUT TOTAL HERE]</td>
</tr>
<tr>
<td valign="top" height="15"></td>
<td valign="top" height="15"></td>
<td valign="top" height="15"></td>
<td valign="top" height="15">[PUT GRAND TOTAL HERE]</td>
</tr>
</table>
</form>

Jun 18 '06 #1
4 6389
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.

can someone point me in the right direction?
<form action="purchas e_req1.asp" method="post" name="purchreq"
onsubmit="retur n validate();">
<table id="itemlist" width="100%">
<tr>
<td valign="top" height="15"><in put type="text" name="qty"
size="4"></td>
<td valign="top" height="15"><te xtarea name="desc" rows="4"
cols="40"></textarea>
<td valign="top" height="15"><in put type="text" name="cost"
size="6"></td>
<td valign="top" height="15">[PUT TOTAL HERE]</td>
</tr>
<tr>
<td valign="top" height="15"></td>
<td valign="top" height="15"></td>
<td valign="top" height="15"></td>
<td valign="top" height="15">[PUT GRAND TOTAL HERE]</td>
</tr>
</table>
</form>

<script type="text/javascript">
function updateTotal(f)
{
var total = parseInt(f.qty. value, 10) * parseFloat(f.co st.value, 10);
var cell = document.getEle mentById("total ");
while (cell.firstChil d) cell.removeChil d(cell.firstChi ld);
cell.appendChil d(document.crea teTextNode(tota l.toString()));
}
</script>

<form action="purchas e_req1.asp" method="post" name="purchreq"
onsubmit="retur n validate();">
<table id="itemlist" width="100%">
<tr>
<td valign="top" height="15"><in put type="text" name="qty"
size="4" onchange="updat eTotal(this.for m)"></td>
<td valign="top" height="15"><te xtarea name="desc" rows="4"
cols="40"></textarea>
<td valign="top" height="15"><in put type="text" name="cost"
size="6" onchange="updat eTotal(this.for m)></td>
<td valign="top" height="15">[PUT TOTAL HERE]</td>
</tr>
<tr>
<td valign="top" height="15"></td>
<td valign="top" height="15"></td>
<td valign="top" height="15"></td>
<td valign="top" height="15" id="total">[PUT GRAND TOTAL HERE]</td>
</tr>
</table>
</form>
Jun 18 '06 #2
TheBagbournes wrote on 18 jun 2006 in comp.lang.javas cript:
<script type="text/javascript">
function updateTotal(f)
{
var total = parseInt(f.qty. value, 10) * parseFloat(f.co st.value,
10); var cell = document.getEle mentById("total ");
while (cell.firstChil d) cell.removeChil d(cell.firstChi ld);
cell.appendChil d(document.crea teTextNode(tota l.toString()));
}
</script>

<form action="purchas e_req1.asp" method="post" name="purchreq"
onsubmit="retur n validate();">
<table id="itemlist" width="100%">
<tr>
<td valign="top" height="15"><in put type="text" name="qty"
size="4" onchange="updat eTotal(this.for m)"></td>
<td valign="top" height="15"><te xtarea name="desc" rows="4"
cols="40"></textarea>
<td valign="top" height="15"><in put type="text" name="cost"
size="6" onchange="updat eTotal(this.for m)></td>
<td valign="top" height="15">[PUT TOTAL HERE]</td>
</tr>

This works in a multirow table on each row separately:

<script type="text/javascript">
function updateTotal(x){
var myRow = x.parentNode.pa rentNode
myRow.cells[2].innerHTML =
parseInt(
myRow.cells[0].getElementsByT agName('INPUT')[0].value,10)*
parseFloat(
myRow.cells[1].getElementsByT agName('INPUT')[0].value,10);
}
</script>

<form onsubmit="retur n false">
<table>

<tr>
<td>
Qty:
<input type="text"
onchange="updat eTotal(this)">
</td>

<td name="cost">
Cost:
<input type="text"
onchange="updat eTotal(this)">
</td>

<td name='total'>
[PUT TOTAL HERE]
</td>
</tr>

<tr>
<td>
Qty:
<input type="text"
onchange="updat eTotal(this)">
</td>

<td name="cost">
Cost:
<input type="text"
onchange="updat eTotal(this)">
</td>

<td name='total'>
[PUT TOTAL HERE]
</td>
</tr>

</table>
</form>

--
Evertjan.
The Netherlands.
Jun 18 '06 #3
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
-->

<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.to LowerCase() != 'tr'){
tr = tr.parentNode;
}

// Get the qty and cost values from the inputs
var qty = tr.cells[0].getElementsByT agName('input')[0].value;
var cost = tr.cells[2].getElementsByT agName('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.r ows;
var i = rows.length;
var gTotal = 0;
while (i--){
gTotal += rows[i].cells[3].innerHTML * 100;
}
document.getEle mentById('grand Total').innerHT ML = 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="purchas e_req1.asp" method="post" name="purchreq"
onsubmit="retur n validate();">
<table id="itemlist">
<th>Qty</th>
<th>Description </th>
<th>Cost \$</th>
<th>Total \$</th>

<!-- This table section holds the items, it needs to be independent
of other table sections
-->
<tbody id="items">
<tr>
<td valign="top" height="15"><in put type="text" name="qty"
size="4" onchange="updat e(this);"></td>
<td valign="top" height="15"><te xtarea name="desc" rows="4"
cols="40"></textarea>
<td valign="top" height="15"><in put type="text" name="cost"
size="6" onchange="updat e(this);"></td>
<td valign="top" height="15" align="right"></td>
</tr>
<tr>
<td valign="top" height="15"><in put type="text" name="qty"
size="4" onchange="updat e(this);"></td>
<td valign="top" height="15"><te xtarea name="desc" rows="4"
cols="40"></textarea>
<td valign="top" height="15"><in put type="text" name="cost"
size="6" onchange="updat e(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

Jun 19 '06 #4
JRS: In article <11************ *********@c74g2 000cwc.googlegr oups.com>,
dated Sun, 18 Jun 2006 18:12:38 remote, seen in
news:comp.lang. javascript, RobG <rg***@iinet.ne t.au> posted :
Presuming you are using \$ and
cents, work in whole cents internally, display as \$ only for output -
same for any other currency.

That applies in the OP's case.
It occurs to me, however, that if VAT, sales taxes, etc., become
involved, then merely working in cents may not be sufficient.

VAT here adds 17.5% to the price, which is +7/40, so one could get exact
results by working in hundredths of a cent; but the tax is 7/47 of the
purchase price...

In any such case, it is essential that the official rules for
calculation be followed.
There has been recent discussion, in news:borland.pu blic.attachment s and
news:borland.pu blic.delphi.lan guage.delphi.ge neral, of a Decimal Math
Unit. Like Javascript, Delphi has no direct support for decimal
arithmetic.

In Javascript terms, IIRC AFAICS &c, the idea is to represent a
"Decimal" as an Object containing an integer Mantissa part, an integer
part representing a base-10 exponent, and parts indicating the desired
accuracy (i.e. 2 decimal places (generally) for tangible currency) and
type of rounding to apply. Operations would be performed by Methods.
It gives an accuracy of about 15 significant figures over a range
exceeding the wildest dreams of the Chancellor of the Exchequer.

The idea is that by using such one could exactly match the requirements
of law and accounting.

Note that if these represent Currency there should be no need for a
Multiply Together method.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.c om/faq/>? JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jun 19 '06 #5

This thread has been closed and replies have been disabled. Please start a new discussion.