Menu
I’m trying to create an invoice where you have 4 columns (QTY, CODE, UNIT COST, AMOUNT), where QTY * UNIT COST = AMOUNT for each row item. Then to totals of the QTY & AMOUNT columns have totals at the bottom.
I’ve been able able to make add/remove rows using the ff code:
[CODE]
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language=”javascript”>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement(“input”);
element1.type = “checkbox”;
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement(“input”);
element2.type = “text”;
cell3.appendChild(element2);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount–;
i–;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
</HEAD>
<BODY>
<form action=”post_add_del_row.php” method=”post”>
<INPUT type=”button” value=”Add Row” onclick=”addRow(‘dataTable’)” />
<INPUT type=”button” value=”Delete Row” onclick=”deleteRow(‘dataTable’)” />
<TABLE id=”dataTable” width=”350px” border=”1″>
<TR>
<TD><INPUT type=”checkbox” name=”chk[]”/></TD>
<TD> 1 </TD>
<TD> <INPUT type=”text” name=”txt[]”/> </TD>
</TR>
</TABLE>
<input type=”submit” />
</form>
</BODY>
</HTML>
and have the following code for multiplying 2 inputs:
[CODE]
<SCRIPT TYPE=”text/javascript”>
<!–
function orderTotal(oform, prefix)
{
// set references to fields
var qty = oform[prefix + “_qty”];
var stHold = oform[prefix + “_stHold”];
var price = oform[prefix + “_price”];
var stVis = oform[prefix + “_stVis”];
// only bother if the field has contents
if (qty == “”)return;
// if the with is not a number (NaN)
// or is zero or less
// everything goes blank
if(isNaN(qty.value) || (qty.value <= 0))
{
qty.value = “”;
stHold.value = “”;
}
// else the field is a valid number, so calculate the
// total order cost and put that value in the
// hidden subtotal field
else
stHold.value = (Math.round(qty.value * price.value * 100))/100;
// call the routine which checks if the
// visible subtotal is correct
visTotal(oform, prefix);
}
// checks if the visible subtotal is correct
// ie, if it equals the hidden subtotal field
function visTotal(oform, prefix)
{
var stHold = oform[prefix + “_stHold”];
var stVis = oform[prefix + “_stVis”];
if (stVis.value != stHold.value)
stVis.value = stHold.value;
}
// –>
</SCRIPT>
<FORM ACTION=”mult.php”>
<TABLE BORDER CELLPADDING=3>
<!– table titles –>
<TR BGCOLOR=”#99CCFF”>
<TH>item</TD>
<TH>quantity</TD>
<TH>price</TD>
<TH>total</TD>
</TR>
<!– Sweater –>
<TR BGCOLOR=”#FFFFCC”>
<TD>Sweater</TD>
<TD><INPUT TYPE=TEXT NAME=”vn_qty” SIZE=3 onChange=”orderTotal(this.form, ‘vn’)”></TD>
<TD><INPUT TYPE=HIDDEN NAME=”vn_price” VALUE=”33.95″>$33.95</TD>
<TD ALIGN=RIGHT>
<INPUT TYPE=HIDDEN NAME=”vn_stHold”>
<INPUT TYPE=TEXT NAME=”vn_stVis” SIZE=10 onChange=”visTotal(this.form, ‘vn’)”></TD>
</TR>
<!– Blazer –>
<TR BGCOLOR=”#FFFFCC”>
<TD>Blazer</TD>
<TD><INPUT TYPE=TEXT NAME=”ja_qty” SIZE=3 onChange=”orderTotal(this.form, ‘ja’)”></TD>
<TD><INPUT TYPE=HIDDEN NAME=”ja_price” VALUE=”99.95″>$99.95</TD>
<TD ALIGN=RIGHT>
<INPUT TYPE=HIDDEN NAME=”ja_stHold”>
<INPUT TYPE=TEXT NAME=”ja_stVis” SIZE=10 onChange=”visTotal(this.form, ‘ja’)”></TD>
</TR>
</TABLE>
<P><INPUT TYPE=SUBMIT VALUE=”submit”>
</FORM>
but because the add/remove part uses arrays for the INPUT names, I don’t know how to incorporate the multiply function onto the add/remove script.
Hope someone can help.