Display a value from database based on Drop down list selection

Question

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>&nbsp;</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">&nbsp;</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>&nbsp;</td>
<td>&nbsp;</td>

   <td>&nbsp;</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">&nbsp;</td>
</tr>
 </table>
<p>&nbsp;</p></td>
</tr>
</table>
</form>
 <p>&nbsp;</p>
 </center>
</body>
</html>

I am really sorry if the coding is too long, but I really need your help.

Answer 1

i think the problem is on your doMath() function.

when you create the row you give always the same "id" to the elements. try to create different id every time you add a row.

Display a value from database based on Drop down list selection

Question

1 answers

solution1
0 2014-04-17 13:32:17

Display a value from database based on Drop down list selection

Question

1 answers

solution1 0 2014-04-17 13:32:17

solution1
0 2014-04-17 13:32:17