简体   繁体   中英

Dropdown list doesn't show data from connected database

I've create a dropdown list with all the product in my 'inventory' table. When a product is selected, it should display a table that shows the selling price and quantity of the product. But nothing happens when I select a product and I can't find the problem with my code.

DB name: nht

Table name: inventory

Table

Dropdown

No results

Here's my code for the HTML:

 <html> <head> <script> function showProduct(str) { if (str == "") { document.getElementById("txtid").innerHTML = ""; return; } else { if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (this.readyState == 30 && this.status == 200) { alert(this.responseText); document.getElementById("txtid").innerHTML = this.responseText; } }; xmlhttp.open("GET","getproduct.php?q="+str,true); xmlhttp.send(); } } </script> <body> <form> <select name="id" onchange="showProduct(this.value)"> <option value="">Select a product:</option> <option value="1">Alternator Assembly Fuso 4D30</option> <option value="2">Alternator Assembly Isuzu V-10</option> <option value="3">Alternator Assembly Hino JO8C</option> <option value="4">Alternator Assembly Isuzu 4BC2</option> <option value="5">Alternator Assembly Fuso 4HF1</option> <option value="6">Alternator Brush Toyota AN-11</option> <option value="7">Alternator Brush Isuzu AK-6</option> <option value="8">Alternator Brush Hino AD-6</option> <option value="9">Alternator Brush Fuso AM-22</option> <option value="10">Alternator Brush Fuso AH-18</option> <option value="11">Armature Assembly Fuso 4D50</option> <option value="12">Armature Assembly Isuzu V-10</option> <option value="13">Armature Assembly Fuso SDC9</option> <option value="14">Armature Assembly Fuso 6D22</option> <option value="15">Armature Assembly Hino JOSC </option> <option value="16">Solomoid Switch Isuzu S5-146</option> <option value="17">Solomoid Switch Fuso SS-1569</option> <option value="18">Solomoid Switch Hino SS-2715</option> <option value="19">Solomoid Switch Toyota SS-1200</option> <option value="20">Solomoid Switch Fuso SS-1504</option> <option value="21">Starter Assembly Fuso 4D30</option> <option value="22">Starter Assembly Isuzu V-10</option> <option value="23">Starter Assembly Hino JO8C</option> <option value="24">Starter Assembly Toyota 2C</option> <option value="25">Starter Assembly Isuzu 4BC2</option> <option value="26">Starter Carbon Brush Fuso 4D30 SM-56 </option> <option value="27">Starter Carbon Brush Isuzu X-10 SK-29</option> <option value="28">Starter Carbon Brush Fuso 8DC9 SM-J7</option> <option value="29">Starter Carbon Brush Isuzu 6BBI SK-14</option> <option value="30">Starter Carbon Brush Hino JO8 SD-81</option> </select> </form> <br> <div id="txtid"><b>Details</b></div> </body> </html> 

and the code for the 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 = intval($_GET['q']); $con = mysqli_connect('localhost','root','','nht'); if (!$con) { die('Could not connect: ' . mysqli_error($con)); } mysqli_select_db($con,"ajax"); $sql="SELECT * FROM inventory WHERE id = '".$q."'"; $result = mysqli_query($con,$sql); echo "<table> <tr> <th>Cost</th> <th>Quantity</th> </tr>"; while($row = mysqli_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['Selling_Price'] . "</td>"; echo "<td>" . $row['Quantity'] . "</td>"; echo "</tr>"; } echo "</table>"; mysqli_close($con); ?> </body> </html> 

Please help because I really feel like I'm missing something.

Try to change this:

    if (this.readyState == 30 && this.status == 200) {
      alert(this.responseText);
      document.getElementById("txtid").innerHTML = this.responseText;
    }

to this:

if (this.readyState == 4) {
    if (this.status == 200 || this.status == 304) {
        alert(this.responseText);
        document.getElementById("txtid").innerHTML = this.responseText;
    }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM