Fatal编程技术网
  • javascript/
  • Javascript 基于下拉列表选择显示数据库中的值

Javascript 基于下拉列表选择显示数据库中的值

javascript php

Javascript 基于下拉列表选择显示数据库中的值,javascript,php,Javascript,Php,我有一张订单。在其中，我需要有一个可以动态添加行的按钮，以便用户可以在表单中添加多个项。我还需要在文本字段中进行实时计算，这样它就可以不使用任何计算按钮来计算小计和总额。最后，我需要一个选择框，从数据库中选择商品名称，并在用户选择商品名称时在文本字段中显示商品价格。我已经尝试过编码这个，但它没有给我任何东西。还有一件事：如何将添加行中的数据保存到数据库中？我的订单如下所示 这是我的orderform.php代码 <html> <head> <SCRIPT langu

我有一张订单。在其中，我需要有一个可以动态添加行的按钮，以便用户可以在表单中添加多个项。我还需要在文本字段中进行实时计算，这样它就可以不使用任何计算按钮来计算小计和总额。最后，我需要一个选择框，从数据库中选择商品名称，并在用户选择商品名称时在文本字段中显示商品价格。我已经尝试过编码这个，但它没有给我任何东西。还有一件事：如何将添加行中的数据保存到数据库中？我的订单如下所示

这是我的orderform.php代码

<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>


函数addRow（tableID）
{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
var row=table.insertRow（rowCount）；
var colCount=table.rows[0].cells.length；
对于（var i=0；i
送货费（RM）
总金额（RM）
如果编码太长，我真的很抱歉，但我真的需要您的帮助。

我认为问题出在您的doMath（）函数上

创建行时，始终为元素提供相同的“id”。
每次添加行时，请尝试创建不同的id。

下拉列表中的内容是什么？欢迎使用堆栈溢出！您可能会注意到，您没有得到多少响应。下面列出三件有帮助的事情-1）一次只问一个重点问题。2）只提供与你正在问的单个重点问题相关的代码。3）你显然试图自己解决问题，但在描述中，你似乎需要我们编写代码——“我需要……我也需要……”这让我很反感，因为有太多人要求我们编写他们的代码，而代码太长了，我花了一分钟才意识到你自己也试图解决它。