how to calculate row total in dynamic form?

[Rich_C]

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>

 

[TheBagbournes]

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.toString()));
}
</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>

 

[Evertjan.]

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.toString()));
}
</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>

 

[RobG]

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.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>

 

[Dr John Stockton]

JRS: In article <[email protected]>,
dated Sun, 18 Jun 2006 18:12:38 remote, seen in

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 and
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.