Question

我试图从我们的数据库中获取一些产品属性，并使用所述属性填充表行，所有这些都基于select选项。

我有一个html表，只有一行，标题是：

SKU
项目说明
Cubic Meters
数量
价格
净价

唯一填充的表格单元是＆＃34; SKU＆＃34;，它有一个选择菜单从我们的数据库中提取选项。表的其余部分是空的。我想要完成的是从我们的数据库中提取表数据，其中sku =＆＃39; select选项的值，并填充html表的其余部分。所以基于＆＃34; sku＆＃34;选择，我们需要能够使用＆＃34;项目描述＆＃34;，＆＃34; Cubic Meters＆＃34;和＆＃34; Price＆＃34;来动态填充html表。

这是表单页面form.php：

<html>
<head>
<link href="ERP/styles/check_cs6.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">

        //add row function
        function onClickAdd() {
        var tableRow = document.getElementById("tableRow");
        var tableRowClone = tableRow.cloneNode(true);
        tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling);
            }
    </script>
    <script>

        //fetch data
    function showProd(str) {
            if (str == "") {
                document.getElementById("txt").innerHTML = "";
                return;
            } else { 
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("prodName").innerHTML = this.responseText;
                    }
                };
                xmlhttp.open("GET","getprod.php?q="+str,true);
                xmlhttp.send();
            }
        }  
    </script>
</head>
<body>
    <div id="left_column">
        <h1>Purchase Order Form</h1>
        <p>Supplier: 
        <select name="supplier">
            <option value="#">Dave</option>
            <option value="#">Dude</option>
        </select>
        </p>
    </div>
    <div id="right_column">
        <p>Date: <input type='text' size='6' maxlength='10' /></p>
        <br>
        <p>Ship To This Address:</p>
        <p>123 Fake Street</p>
        <p>Plaza</p>
        <p>Springfield, Simpsons</p>
    </div>
    <br>
    <div id="POform">
        <p class="alignLeft">Ship Date: <input type="text" size='6' maxlength='10'></p>
        <p class="alignRight">PO No.: <input type="text" size="6" maxlength="10"></p>
    </div>

<table id="myTable" width="100%">
            <tr>
                <th>SKU</th>
                <th>Item Description</th>
                <th>CBM</th>
                <th>Qty</th>
                <th>Unit Price</th>
                <th>Net Price</th>
            </tr>
            <tr id="tableRow">
                <td width ="10%">
                <select name="users" onchange="showUser(this.value)"> 
        <?php

            $connection = mysql_connect('address', 'user', 'pw');
            mysql_select_db('ADI'); 
            $sql = mysql_query("SELECT sku FROM inventory");
            while ($row = mysql_fetch_array($sql)){
            echo "<option>". $row['sku'] . "</option>";
                                }
        ?>
        </select>
                </td>
                <td width ="50%" id="prodName">

                </td>
                <td width = "10%" id="cbm"></td>
                <td width = "10%" id="qty"><input type="text" size="5"></td>
                <td width = "10%" id="cost"></td>
                <td width = "10%" id="netCost"></td>
                <!--Delete Function doesn't work-->
                <!--<td><input type="button" value="Delete" onclick="deleteRow  ('myTable',0)"></td>-->

            </tr>
            <p>
                  <input type="button" name="addButton" value="Add Item" onClick="Javascript:onClickAdd()">
            </p>
        </table>
<br>
<!--<div id="txtHint"><b>info will be listed here...</b></div>-->

</body>
</html>

这是表单处理程序页面getprod.php：

<!DOCTYPE html>
<html>
<head>
<style>
table {
    width: 100%;
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
    padding: 5px;
}

th {text-align: left;}
</style>
</head>
<body>

<?php
$q = $_GET['q'];


$con = mysqli_connect('localhost','root','','ADI');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"ADI");
$sql="SELECT prodName, sku, cbm, cost FROM inventory WHERE sku = '".$q."'";
$result = mysqli_query($con,$sql);


/*
echo "<table width=100%>
<tr>
<th>SKU</th>
<th>Item Description</th>
<th>CBM</th>
<th>Qty</th>
<th>Unit Price</th>
<th>Net Amount</th>
</tr>";*/
while($row = mysqli_fetch_array($result)) {
   // echo "<tr>";
    //echo "<td>" . $row['sku'] . "</td>";
    echo "<td>" . $row['prodName'] . "</td>";
    //echo "<td>" . $row['cbm'] . "</td>";
    //echo "<td>" . $row['qty'] . "</td>";
    //echo "<td>" . $row['cost'] . "</td>";
    //echo "<td>" . $row['amt'] . "</td>";
    //echo "</tr>";
}

mysqli_close($con);
?>
</body>
</html>

以下是CSS，如果这有助于格式化：

@charset "utf-8";

#container {    
    width: 968px;    
    background: #FFF;    
    margin: 0 auto;    
    padding-left: 10px;    
    padding-right: 10px;    
    overflow: hidden;       
}    

#left_column{    
    margin-left: 40px;    
    float: left;    
}

#right_column{    
    margin-right: 100px;    
    float: right;    
}

#header h1 {    
    color: #FF0000;    
    font-size: 96px;    
    font-family: sarina, serif;
    margin: 0;    
    float: left;    
}

#header {    
    color: #FFF;    
    background-color: #C8C6C6;    
    height: 100px;
    position: relative;    
}

body {    
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;    
    color: #3B3B3B;    
    background-color: #FFF;    
    margin: 0px;    
}

#header h2 {    
    color: #FF0000;    
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;    
    font-size: 30px;    
    font-variant: small-caps;    
    margin-top: 0px;    
    margin-bottom: 0px;    
    padding-top: 15px;    
}

#header a {    
    font-size: 20px;    
    font-weight: bold;    
    font-variant: small-caps;    
    color: #FFF;    
    text-decoration: none;
    text-align: center;    
    width: 100px;    
    display: block;    
}

#header ul {    
    margin: 0px;    
    padding: 0px;    
    list-style-type: none;    
    position: absolute;    
    right: 0px;
    bottom: 0px;    
}

#main_text {    
    background-color: #FFF;    
    width: 300px;    
    position: absolute;    
    right: 60px;    
    bottom: 60px;    
}



#header li {    
    float: left;    
}

#addProduct {    
    margin-left: 125px;    
}

#inventory {    
    margin-left: 20px;;    
}

#purchaseOrders {       

}

a.createNew {    
    float: right;    
} 

#POform{    
    margin-top: 250px;    
}

p.alignRight{    
    float:right;    
    margin-right: 100px;    
}

p.alignLeft{    
    float:left;
    margin-left: 40px;    
}  

#items {    
    margin-top: 325px;    
    margin-left: 40px;    
    margin-right: 100px;    
}

.POinput{    
    width: 50px;    
    float: right;    
}   

#items th{    
    text-align:center;    
    border-bottom: 1px dotted;    
    height: 20px;    
}    

#total{    
    margin-left: 100px;    
    margin-right: 100px;    
}

Answer 1

在您的选项中，您只显示sku，但您还必须设置值attribte。否则，当您提交表单时，所选项目具有空值属性。

echo '<option value="' . $row['sku'] . '">'.$row['sku'].'</option>'

Answer 2

想出来，在表单页面写了额外的javascript函数，根据select选项从数据库中获取单个列。

//fetches the ProdName
function getProdName(str) {
            if (str == "") {
                document.getElementById("txtHint").innerHTML = "";
                return;
            } else { 
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("prodName").innerHTML = this.responseText;
                    }
                };
                //php processor address
                xmlhttp.open("GET","getProd.php?q="+str,true);
                xmlhttp.send();
            }
        }
    // fetches the CBM
    function getCBM(str) {
            if (str == "") {
                document.getElementById("txtHint").innerHTML = "";
                return;
            } else { 
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("cbm").innerHTML = this.responseText;
                    }
                };
                //php processor address
                xmlhttp.open("GET","getCBM.php?q="+str,true);
                xmlhttp.send();
            }
        }
    //fetches the price
    function getPrice(str) {
        if (str == "") {
            document.getElementById("txtHint").innerHTML = "";
            return;
        } else { 
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("cost").innerHTML = this.responseText;
                }
            };
                //php processor address
                xmlhttp.open("GET","getPrice.php?q="+str,true);
                xmlhttp.send();
            }
        }

还编写了单独的php文件来处理每列的sql查询，这一个是getProd.php。为getCBM（getCBM.php）和getPrice（getPrice.php）做了一个但是只更改了sql查询分别选择了CBM和Price

<?php

$q = $_GET['q'];

$con = mysqli_connect('address','user','pw','db');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
        }

mysqli_select_db($con,"ADI");
$sql="SELECT prodName, cbm, cost FROM inventory WHERE sku = '".$q."'";
$result = mysqli_query($con,$sql);


while($row = mysqli_fetch_array($result)) {

    //echo "<td>" . $row['sku'] . "</td>";
    echo "<td>" . $row['prodName'] . "</td>";
    //echo "<td>" . $row['cbm'] . "</td>";
    //echo "<td>" . $row['qty'] . "</td>";
    //echo "<td>" . $row['cost'] . "</td>";
    //echo "<td>" . $row['amt'] . "</td>";

}

    /*foreach($result as $row) {
        echo "<td>" . $row['prodName'] . "</td>";
        echo "<td>" . $row['cbm'] . "</td>";
        }*/

mysqli_close($con);

?>

如何根据选择选项

2 个答案: