php文件与mySql数据库使用Javascript html

Question

So I am trying to get create a HTML that uses javascript, PHP, and CSS. I am having issues figuring out how to get the PHP that pulls in my database to post on the website with a click of a button using a javascript function. I have tried to setup jquery and ajax but I just can't seem to get it to work. Everything is connected as it should be. I have googled and googled and tried many things so figured I would post and see if someone can help me out. If I post the PHP file into my HTML it works properly but I have multiple querys that I want associated with a button. If I can just get one button to work I should be good to go. Thank you.

JS

function mad_hosp(str) {
    if(str == 0){ 
        document.getElementById("output").innerHTML = "Error.";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("output").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "madison_narc.php?",  true);
        xmlhttp.send();
    }
}

Here are my buttons in HTML

<div class="navbar">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <div class="dropdown">
        <button class="dropbtn">Dropdown 
            <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
            <button onclick="main_hosp()"> 
                <a href=("#") class="button">Huntsville Hospital</a>
            </button>
            <button onclick="W&C_hosp()"> 
                <a href=("#") class="button">Womens and Childrens Hospital</a>
            </button>
            <button onclick="mad_hosp()">
                <a href=("#") class="button">Madison Hospital</a>
            </button>
        </div>
    </div> 
</div>


<p>Waiting for the location to be selected... <id="output"></p>

PHP

 <?php
 $sql = "SELECT
 currentinventoryaudit.MedId as MedID,
 (currentinventoryaudit.MedDescription) as MedicationDescription,
 sum(currentinventoryaudit.CurrentCount) as TotalOnHand,
 'MadisonNarcVault' as StationName

 FROM
 currentinventoryaudit

 where
 currentinventoryaudit.StationName like ('%CW101296%') and
 currentinventoryaudit.MedDescription not like ('key%') and
 currentinventoryaudit.MedDescription not like ('%zz-%') and
 currentinventoryaudit.MedDescription not like ('%alp%')

 group by
 2

 order by
 2 asc;";

 $result = mysqli_query($conn,$sql);
 $resultCheck = mysqli_num_rows($result);

 echo "<table>
    <tr>
    <th>MedID</th>
    <th>Medication Description</th>
    <th>Total On Hand</th>
    <th>Station Name</th>
    </tr>";
 if($resultCheck > 0) {
     while ($row = mysqli_fetch_assoc($result)){
        echo"<tr>";
        echo "<td>" . $row['MedID']."</td>";
        echo "<td>" . $row ['MedicationDescription']."</td>";
        echo "<td>" . $row ['TotalOnHand']."</td>";
        echo "<td>" . $row ['StationName']."</td>";
        echo "</tr>";
     }
     echo "</table>";
 }
 ?>

Answer 1

This doesn't look like valid markup.

<p>Waiting for the location to be selected... <id="output"></p>

Use this instead:

<div id="output">
    <p>Waiting for the location to be selected... </p>
</div>

document.getElementById("output") is looking for an element with an id attribute with a value of "output", not an id element.