I have one order form. In it, I need to have a button that can add row dynamically, so that the user can add more than one item in the form. I also need to have a real time calculation in the text field, so it can calculate the sub total and total amount without using any calculate button. Lastly, I need to have a selection box that selects Item Name from the database, and displays the Item price in the text field when the user selects the item name. I have already tried coding this and it is gives me nothing. One more thing: How should I save the data from the added row into the database? My order form is shown below.
This is my orderform.php coded
<html>
<head>
<SCRIPT language="javascript">
function addRow(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++)
{
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value ="";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
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) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
function doMath()
{
var itemPrice=parseFloat(document.getElementById('itemPrice').value);
var itemQuantity=parseFloat(document.getElementById('itemQuantity').value);
var deliveryfee=parseFloat(document.getElementById('deliveryfee').value);
var subTotal=parseFloat(document.getElementById('subTotal').value);
deliveryfee=5.00;
var subTotal=(itemPrice +0)*(itemQuantity +0);
var total=subTotal + deliveryfee;
var totalAmount= 0 + total;
document.getElementById('subTotal').value=subTotal;
document.getElementById('totalAmount').value=totalAmount;
}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Customer Order Form</title>
</head>
<body>
<center>
<form method="post" action="index.php?a=12" name="frm" id="frm">
<table width="800" cellspacing="0" cellpadding="10" style="border: 1px solid #000;" align="center" >
<tr>
<td align="center" bgcolor="#0099FF"><h1>Order Form</h1></td>
</tr>
<tr>
<td>
<p> </p><table width="819" align="center" bgcolor="#999999" style="border: 0px solid #000;" id="table1">
<tr>
<td colspan="7" bgcolor="#0099FF" align="center">ORDER DETAILS<br /></td>
</tr>
<tr>
<td width="91">Order No</td>
<td width="149"><input type="text" name="orderno" id="order_no" /></td>
<td width="168" align="right">Date</td>
<td width="182"><input type="date" name="order_date" id="date" /></td>
</tr>
<tr>
<td colspan="7" bgcolor="#0099FF" align="center">CUSTOMER DETAILS</td>
</tr>
<tr>
<td>Customer Name</td>
<td><input type="text" name="customer_name" id="customer_name" /></td>
<td align="right">Contact No </td>
<td><input type="text" name="customer_cont" id="contact_no" /></td>
</tr>
<tr>
<td>Address</td>
<td><textarea rows="5" cols="20" name="customer_add" id="address"></textarea></td>
</tr>
<tr>
<td colspan="7" bgcolor="#0099FF" align="center">ITEM DETAILS</td>
</tr>
<tr>
<td></td>
<td align="center">Item Name</td>
<td>Unit Price (RM)</td>
<td>Quantity</td>
<td width="195">Sub Total (RM)</td>
</tr>
</table>
<TABLE id="dataTable" width="819" bgcolor="#999999">
<tr>
<td width="87"><input type="checkbox" name="chk"/></TD>
<td width="153">
<select name="itemName" id="item_name"/>
<option value="">--- Select ---</option>
<?php
include("db.php");
$select="cbms";
if(isset($select)&&$select!="")
{
$select=$_POST['itemName'];
}
$list=mysql_query("select * from item order by itemName asc");
while($row_list=mysql_fetch_assoc($list))
{
?>
<option value="<?php echo $row_list['item_id']; ?><?php echo $row_list['itemPrice']; ?>">
<?php echo $row_list['itemName']; ?>
</option>
<?php
}
?>
</select>
</td>
<td width="175"><input type="text" name="itemPrice" id="itemPrice" onChange="doMath();" /></td>
<td width="182"><input type="text" name="itemQuantity" id="itemQuantity" onChange="doMath();" /></td>
<td width="198"><input type="text" name="subTotal" id="subTotal" onChange="doMath()"/></td>
</tr>
</table>
<table width="819" bgcolor="#999999">
<tr>
<td colspan="7" bgcolor="#0099FF" align="center"> </td>
</tr>
<tr>
<td width="134"><input type="submit" name="Save Order" value="Save Order" /></td>
<td width="112">
<input type="button" value="Add Row" onclick="addRow('dataTable')" /></td>
<td width="136"> <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" /></td>
<td width="215" align="right">Delivery Fee (RM)</td>
<td width="198" align="left"><input type="text" name="deliveryfee" value="5.00" id="deliveryfee" onChange="doMath();"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td align="right">Total Amount (RM)</td>
<td align="left"><input type="text" name="totalAmount" id="totalAmount" onBlur="doMath()"/></td>
</tr>
<tr>
<td colspan="7" bgcolor="#0099FF" align="center"> </td>
</tr>
</table>
<p> </p></td>
</tr>
</table>
</form>
<p> </p>
</center>
</body>
</html>
I am really sorry if the coding is too long, but I really need your help.
