Here is a very handy script to ADD a series of fields (name, number, title)... combined with a resulting total if one of the fields contains numbers (name, 10.00, guest) add another (name, 15.00, member) - Total = 25.00
<html>
<head>
<title>
Adding a series of values with a button
</title>
<script type="text/javascript">
function viewsource() {
alert(document.body.innerHTML);
}
</script>
<script type="text/javascript">
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var frm=document.form0;
if (!frm.ary) frm.ary=[frm.t1_2];
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// numberd row
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
// Item row
var cellRight1 = row.insertCell(1);
var el1 = document.createElement('input');
el1.type = 'text';
el1.name = 't' + iteration + '_1';
el1.id = 't' + iteration + '_1';
el1.size = 30;
cellRight1.appendChild(el1);
// Price row
var cellRight2 = row.insertCell(2);
var el2 = document.createElement('input');
frm.ary.push(el2);
el2.type = 'text';
el2.value = '';
el2.name = 't' + iteration + '_2';
el2.id = 't' + iteration + '_2';
el2.size = 5;
el2.onkeyup=Calc;
el2.onblur=Calc;
cellRight2.appendChild(el2);
// Item row
var cellRight1 = row.insertCell(3);
var el1 = document.createElement('input');
el1.type = 'text';
el1.name = 'tA' + iteration + '_1';
el1.id = 'tA' + iteration + '_1';
el1.size = 10;
cellRight1.appendChild(el1);
}
</script>
<script type="text/javascript">
function Calc(){
var frm=document.form0;
if (!frm.ary) frm.ary=[frm.t1_2];
var total=0;
for (var zxc0=0;zxc0<frm.ary.length;zxc0++){
if (frm.ary[zxc0].value.length>0&&!isNaN(frm.ary[zxc0].value)) total+=frm.ary[zxc0].value*1;
}
frm.sum.value=total;
}
</script>
</head>
<body>
<form action="none" method="get" name="form0" id="form0">
<table border="0" id="tblSample" align="center">
<tr>
<th colspan="4">
<table border="0" align="center" width="455px">
<tr>
<td align="right" width="280px">Name</td>
<td align="right" width="66px">cost</td>
<td align="right">member/guest</td>
</tr>
</table>
<hr><div align="left">
<input type="button" value="Add a Member" onclick=
"addRowToTable();">
</div>
</th>
</tr>
<tr id="cloneid" >
<td width="65px">
1 Member
</td>
<td>
<input type="text" name="t1_1" id="t1_1" size="30">
</td>
<td>
<input type="text" name="t1_2" id="t1_2" size="5" value="" onkeyup="Calc();" onblur="Calc();">
</td>
<td>
<input type="text" name="tA_1" id="tA_1" size="10">
</td>
</tr>
</table>
<table border="0" align="center" width="455px">
<tr>
<td align="right">
<br>
Sum: <input type="text" name="sum" id="sum"><br>
</td>
</tr>
</table>
</form>
</body>
</html>
