By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,271 Members | 1,274 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,271 IT Pros & Developers. It's quick & easy.

how to calculate row total in dynamic form?

P: n/a
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="purchase_req1.asp" method="post" name="purchreq"
onsubmit="return validate();">
<table id="itemlist" width="100%">
<tr>
<td valign="top" height="15"><input type="text" name="qty"
size="4"></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"></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
Share this Question
Share on Google+
4 Replies

P: n/a
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="purchase_req1.asp" method="post" name="purchreq"
onsubmit="return validate();">
<table id="itemlist" width="100%">
<tr>
<td valign="top" height="15"><input type="text" name="qty"
size="4"></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"></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>


Off the top of my head, I'd start with something like...

In the doument head:

<script type="text/javascript">
function updateTotal(f)
{
var total = parseInt(f.qty.value, 10) * parseFloat(f.cost.value, 10);
var cell = document.getElementById("total");
while (cell.firstChild) cell.removeChild(cell.firstChild);
cell.appendChild(document.createTextNode(total.toS tring()));
}
</script>

Then your form would be...

<form action="purchase_req1.asp" method="post" name="purchreq"
onsubmit="return validate();">
<table id="itemlist" width="100%">
<tr>
<td valign="top" height="15"><input type="text" name="qty"
size="4" onchange="updateTotal(this.form)"></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="updateTotal(this.form)></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

P: n/a
TheBagbournes wrote on 18 jun 2006 in comp.lang.javascript:
<script type="text/javascript">
function updateTotal(f)
{
var total = parseInt(f.qty.value, 10) * parseFloat(f.cost.value,
10); var cell = document.getElementById("total");
while (cell.firstChild) cell.removeChild(cell.firstChild);
cell.appendChild(document.createTextNode(total.toS tring()));
}
</script>

Then your form would be...

<form action="purchase_req1.asp" method="post" name="purchreq"
onsubmit="return validate();">
<table id="itemlist" width="100%">
<tr>
<td valign="top" height="15"><input type="text" name="qty"
size="4" onchange="updateTotal(this.form)"></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="updateTotal(this.form)></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.parentNode
myRow.cells[2].innerHTML =
parseInt(
myRow.cells[0].getElementsByTagName('INPUT')[0].value,10)*
parseFloat(
myRow.cells[1].getElementsByTagName('INPUT')[0].value,10);
}
</script>

<form onsubmit="return false">
<table>

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

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

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

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

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

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

</table>
</form>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jun 18 '06 #3

P: n/a
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

Jun 19 '06 #4

P: n/a
JRS: In article <11*********************@c74g2000cwc.googlegroups. com>,
dated Sun, 18 Jun 2006 18:12:38 remote, seen in
news:comp.lang.javascript, RobG <rg***@iinet.net.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.public.attachments and
news:borland.public.delphi.language.delphi.general , 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.com/faq/>? JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jun 19 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.