R
rick
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"> </td>
<td><input type="text" name="cost1" size="7" onChange="calc_total()"
maxlength="7"> </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="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;
}
//-->
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"> </td>
<td><input type="text" name="cost1" size="7" onChange="calc_total()"
maxlength="7"> </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="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;
}
//-->