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>Testin g Tables Calculation</title>
<script language="JavaS cript" 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> </td>
<td><input type "text" size="7" name="total" readOnly> </td>
</tr>
</table>
<input type="button" value="Add" onclick="addRow ToTable();" />
<input type="button" value="Remove" onclick="remove RowFromTable(); " />
</form>
</body>
</html>
<!-- Begin Add Row to Itemlist Table
function addRowToTable()
{
lastRow=1;
var tbl = document.getEle mentById('iteml ist');
var iteration = lastRow;
var row = tbl.insertRow(l astRow);
// qty cell
var qty = row.insertCell( 0);
var el_qty = document.create Element('input' );
el_qty.setAttri bute('type', 'text');
el_qty.setAttri bute('name', 'qty' + iteration);
el_qty.setAttri bute('size', '7');
el_qty.setAttri bute('maxlength ', '7');
el_qty.setAttri bute('onChange' , 'calc_total()') ;
qty.appendChild (el_qty);
// price cell
var price = row.insertCell( 1);
var el_price = document.create Element('input' );
el_price.setAtt ribute('type', 'text');
el_price.setAtt ribute('name', 'price' + iteration);
el_price.setAtt ribute('size', '7');
el_price.setAtt ribute('maxleng th', '4');
el_price.setAtt ribute('onChang e', 'calc_total()') ;
price.appendChi ld(el_price);
}
//Remove a row from the table
function removeRowFromTa ble()
{
var tbl = document.getEle mentById('iteml ist');
var last_Row = tbl.rows.length ;
if (last_Row > 2) tbl.deleteRow(l ast_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_uni ts * price_of_units)
document.myform .total.value = total_cost;
}
//-->
