469,579 Members | 1,102 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,579 developers. It's quick & easy.

How to calculate a total from a list of cells

Can anyone help, I am try to create a simple form using a table, where a
user can fill out
quanty and price and have a total automatically calculated and inserted in
another field.
I stuck trying to figure out how expand this script to recalculate when rows
are added or
removed.
My code so far.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Testing Tables Calculation</title>
<script language="JavaScript" src="/javascript/testtables.js"></script>
</head>
<body>
<form name="myform" method="post" action="">
<table id="itemlist" cellspacing="2" cellpadding="2" border="1">
<tr>
<th>Qty</th>
<th>Cost</th>
</tr>
<tr>
<td><input type="text" name="qty1" size="7" onChange="calc_total()"
maxlength="7">&nbsp;</td>
<td><input type="text" name="cost1" size="7" onChange="calc_total()"
maxlength="7">&nbsp;</td>
</tr>
</table>
<hr>
<table id="totalcost" border="1">
<tr>
<td><input type="text" size="7" name="test" readonly>&nbsp;</td>
<td><input type "text" size="7" name="total" readOnly>&nbsp;</td>
</tr>
</table>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />
</form>
</body>
</html>

<!-- Begin Add Row to Itemlist Table
function addRowToTable()
{
lastRow=1;
var tbl = document.getElementById('itemlist');
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

// qty cell
var qty = row.insertCell(0);
var el_qty = document.createElement('input');
el_qty.setAttribute('type', 'text');
el_qty.setAttribute('name', 'qty' + iteration);
el_qty.setAttribute('size', '7');
el_qty.setAttribute('maxlength', '7');
el_qty.setAttribute('onChange', 'calc_total()');
qty.appendChild(el_qty);

// price cell
var price = row.insertCell(1);
var el_price = document.createElement('input');
el_price.setAttribute('type', 'text');
el_price.setAttribute('name', 'price' + iteration);
el_price.setAttribute('size', '7');
el_price.setAttribute('maxlength', '4');
el_price.setAttribute('onChange', 'calc_total()');
price.appendChild(el_price);
}

//Remove a row from the table
function removeRowFromTable()
{
var tbl = document.getElementById('itemlist');
var last_Row = tbl.rows.length;
if (last_Row > 2) tbl.deleteRow(last_Row - 1);
}

// Calculate the total
function calc_total()
{
var num_of_units = document.myform.qty1.value;
var price_of_units = document.myform.cost1.value;
var total_cost = eval(num_of_units * price_of_units)
document.myform.total.value = total_cost;
}
//-->
Jul 23 '05 #1
7 2636
In article
<mW*********************@twister01.bloor.is.net.ca ble.rogers.com>, rick
<rmsingh@no_spam_rogers.com> wrote:
Can anyone help, I am try to create a simple form using a table, where a
user can fill out
quanty and price and have a total automatically calculated and inserted in
another field.
I stuck trying to figure out how expand this script to recalculate when rows
are added or
removed.
My code so far.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Testing Tables Calculation</title>
<script language="JavaScript" src="/javascript/testtables.js"></script>
</head>
<body>
<form name="myform" method="post" action="">
<table id="itemlist" cellspacing="2" cellpadding="2" border="1">
<tr>
<th>Qty</th>
<th>Cost</th>
</tr>
<tr>
<td><input type="text" name="qty1" size="7" onChange="calc_total()"
maxlength="7">&nbsp;</td>
<td><input type="text" name="cost1" size="7" onChange="calc_total()"
maxlength="7">&nbsp;</td>
</tr>
</table>
<hr>
<table id="totalcost" border="1">
<tr>
<td><input type="text" size="7" name="test" readonly>&nbsp;</td>
<td><input type "text" size="7" name="total" readOnly>&nbsp;</td>
</tr>
</table>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />
</form>
</body>
</html>

<!-- Begin Add Row to Itemlist Table
function addRowToTable()
{
lastRow=1;
var tbl = document.getElementById('itemlist');
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

// qty cell
var qty = row.insertCell(0);
var el_qty = document.createElement('input');
el_qty.setAttribute('type', 'text');
el_qty.setAttribute('name', 'qty' + iteration);
el_qty.setAttribute('size', '7');
el_qty.setAttribute('maxlength', '7');
el_qty.setAttribute('onChange', 'calc_total()');
qty.appendChild(el_qty);

// price cell
var price = row.insertCell(1);
var el_price = document.createElement('input');
el_price.setAttribute('type', 'text');
el_price.setAttribute('name', 'price' + iteration);
el_price.setAttribute('size', '7');
el_price.setAttribute('maxlength', '4');
el_price.setAttribute('onChange', 'calc_total()');
price.appendChild(el_price);
}

//Remove a row from the table
function removeRowFromTable()
{
var tbl = document.getElementById('itemlist');
var last_Row = tbl.rows.length;
if (last_Row > 2) tbl.deleteRow(last_Row - 1);
}

// Calculate the total
function calc_total()
{
var num_of_units = document.myform.qty1.value;
var price_of_units = document.myform.cost1.value;
var total_cost = eval(num_of_units * price_of_units)
document.myform.total.value = total_cost;
}
//-->

I have not actually tried to understand your script at this time but I
have the following recommendations.

Can you change the onclick="addRow..." and onclick="removeRow..." to
onclick="addRow... ; calc_total;"
You can do multiple commands in the onclick.

The latest javascript has the following changes:
Remove language="javascript" and replace it with type="text/javascript"
Change readonly to readonly="readonly"

--
Dennis M. Marks
http://www.dcs-chico.com/~denmarks/
Replace domain.invalid with dcsi.net
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----
Jul 23 '05 #2

"rick" <rmsingh@no_spam_rogers.com> wrote in message
news:mW*********************@twister01.bloor.is.ne t.cable.rogers.com...
Can anyone help, I am try to create a simple form using a table, where a
user can fill out
quanty and price and have a total automatically calculated and inserted in
another field.
I stuck trying to figure out how expand this script to recalculate when rows are added or
removed.
My code so far.


I appreciate your comments but the problem is not calling 'calc_total' again
, but modifing
'calc_total' to recompute a new total including any new rows/fields that was
added or removed.
Thanks again........
Jul 23 '05 #3
Dennis M. Marks wrote:
rick <rmsingh@no_spam_rogers.com> wrote:
I am try to create a simple form using a table, where a user can fill
outquanty and price and have a total automatically calculated and inserted in
another field. I stuck trying to figure out how expand this script to
recalculate when rows are added or removed.

<script language="JavaScript" src="/javascript/testtables.js"></script>
As Dennis said, use <script type="text/javascript">
function addRowToTable() ....// price cell ....el_price.setAttribute('name', 'price' + iteration);
To be consistent with the current table, and allow looping in the
total_cost function, use 'cost' instead of 'price':

el_price.setAttribute('name', 'cost' + iteration);
function calc_total() {
var num_of_units = document.myform.qty1.value;
var price_of_units = document.myform.cost1.value;
var total_cost = eval(num_of_units * price_of_units)
document.myform.total.value = total_cost;
}


Now you can loop through all but the last table rows to get the total:

function calc_total() {
var rowcount = document.getElementById('itemlist').rows.length;
var subtotal=0;
for (i=0; i<rowcount-1; i++)
subtotal += (document.myform.elements('qty'+i).value *
document.myform.elements('cost'+i).value);
document.myform.total.value = subtotal;
}

Mike

Jul 23 '05 #4
Revision:

- I had trouble getting setAttribute to work - 'name=qtyN' 'name=costN'
weren't showing up in the table html, so I used the cell innerHTML to
create the input textboxes instead.

- I had to change the value of iteration to get the looping in
calc_total to work, same with deleting row 1 instead of the lastrow-1.

- re-calc whenever there's a number of rows change

....here's what I have so far, maybe give this a try.

function addRowToTable() {
var tbl = document.getElementById('itemlist');
var iteration = tbl.rows.length-1;
var row = tbl.insertRow(1);
var qty = row.insertCell(0); // qty cell
qty.innerHTML='<input type="text" name=qty'+iteration+' size=7
maxlength=7 onChange="calc_total()">';
var price = row.insertCell(1); // price cell
price.innerHTML='<input type="text" name=cost'+iteration+' size=7
maxlength=4 onChange="calc_total()">';
calc_total();
}

function removeRowFromTable() {
var tbl = document.getElementById('itemlist');
var last_Row = tbl.rows.length;
if (last_Row > 2)
tbl.deleteRow(1);
calc_total();
}

function calc_total() {
var rowcount = document.getElementById('itemlist').rows.length-1;
var subtotal=0;
var currcost=0;
var currqty=0;
for (var i=0; i<rowcount; i++) {
currqty = document.myform.elements('qty'+i).value;
currcost = document.myform.elements('cost'+i).value;
if ((currqty == "") || (currcost == "")) {
//ignore this row, it includes blanks
} else {
subtotal += (currqty * currcost);
}
}
document.myform.total.value = subtotal;
}

function showtableinnerhtml() {
alert(document.getElementById('itemlist').innerHTM L);
}

Jul 23 '05 #5

Thanks for all the help, I will try it tonight.
Jul 23 '05 #6

Now you can loop through all but the last table rows to get the total:

function calc_total() {
var rowcount = document.getElementById('itemlist').rows.length;
var subtotal=0;
for (i=0; i<rowcount-1; i++)
subtotal += (document.myform.elements('qty'+i).value *
This line is causing an error in Internet Explorer and Firefox, here it is
Error: document.myform.elements is not a function
document.myform.elements('cost'+i).value);
document.myform.total.value = subtotal;
}

Mike

Jul 23 '05 #7
Thanks mscir I've the idea now, I appreciate your help

Rick
Jul 23 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Building Blocks | last post: by
4 posts views Thread by scota | last post: by
reply views Thread by suresh191 | last post: by
4 posts views Thread by guiromero | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.