Need help totalling values from arrays!

**misslana** · May 21, 2004, 13:10

As a newbie to Javascript, I need some extra help on this task. I have a dynamic table displaying multiple columns of data in an array. I need to total two of the columns into grand totals. I have read some tutorials but am having a heck of a time making this work. The function will be called on each onBlur event of the textfields I am adding, so that the total gets updated as soon as data is entered. Below is the script - anyhelp would be appreciated!

function calculateGrandTotals()
{
if (!document.contribgrid) return;

var ename, salary, contribution, i;
for(i=0;i<document.contribgrid.elements[].length;i++) {
ename = document.contribgrid.elements[i].name;
if (ename.indexOf("amount_")==0) {
salary += document.contribgrid.elements[i].value.toFixed(2);
} else if (ename.indexOf("contribution_")==0) {
contribution += document.contribgrid.elements[i].value.toFixed(2);
}
}
if (document.contribgrid.tb_grandtotalsalary) document.contribgrid.tb_grandtotalsalary.value = salary.toFixed(2);
if (document.contribgrid.tb_grandtotalcontrib) document.contribgrid.tb_grandtotalcontrib.value = contribution.toFixed(2);
}

**adios** · May 21, 2004, 20:50

Next time: HTML !

(can't see your form from here).

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

function calc_total_amt(oText)
{
	var field, n = 1, total_salary = 0, oForm = oText.form;
	while (field = oForm.elements['amount_' + n++])
		total_salary += Number(field.value.replace(/\$/, ''));
	oForm.elements.tb_grandtotalsalary.value = '$' + total_salary;
}

function calc_total_contrib(oText)
{
	var field, n = 1, total_contrib = 0, oForm = oText.form;
	while (field = oForm.elements['contribution_' + n++])
		total_contrib += Number(field.value.replace(/\$/, ''));
	oForm.elements.tb_grandtotalcontrib.value = '$' + total_contrib;
}

</script>
</head>
<body>
<form name="contribgrid">
<table border=0>
<thead>
<tr>
<th>Salary</th><th>Contribution</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="amount_1" value="$" onblur="calc_total_amt(this)" /></td>
<td><input type="text" name="contribution_1" value="$" onblur="calc_total_contrib(this)" /></td>
</tr><tr>
<td><input type="text" name="amount_2" value="$" onblur="calc_total_amt(this)" /></td>
<td><input type="text" name="contribution_2" value="$" onblur="calc_total_contrib(this)" /></td>
</tr><tr>
<td><input type="text" name="amount_3" value="$" onblur="calc_total_amt(this)" /></td>
<td><input type="text" name="contribution_3" value="$" onblur="calc_total_contrib(this)" /></td>
</tr><tr>
<td height="20" colspan="2"></td>
</tr><tr>
<td align="right">total salary:</td>
<td><input type="text" name="tb_grandtotalsalary" value="$0.00" readonly="readonly" /></td>
</tr><tr>
<td align="right">total contributions:</td>
<td><input type="text" name="tb_grandtotalcontrib" value="$0.00" readonly="readonly" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

Very rough: no input validation, currency formatting, etc. Could also do this without textfields nowadays (using document text for display). You forgot to initialize 'salary' & 'contribution' to zero, so += them will start out as 'undefinedsomething'. Also: the Form.elements array is referenced as simply...Form_ref.elements.

**misslana** · May 24, 2004, 12:33

Thank You SO MUCH for your help - you rock!

The SitePoint Forums have moved.

User Tag List

Thread: Need help totalling values from arrays!

Thread Tools

Display

Need help totalling values from arrays!

Bookmarks

Bookmarks

Posting Permissions