Re: How to calculate a total from a list of cells

Dennis M. Marks wrote:

rick <rmsingh (AT) no_spam_rogers (DOT) 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

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);
}

Thanks for all the help, I will try it tonight.

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

Thanks mscir I've the idea now, I appreciate your help

Rick