Trying to load datatable from SQL Server query with where clause on PHP site using AJAX

I was following along Dani Krossing’s video to help with using AJAX for a SQL Server query (his video is for MySQL) as I have not used AJAX queries before. Hopefully, with some guidance on what I have done so far, it will end up a good lesson for me.

I am trying to build a webpage for our stock takes. The user selects the stock take they are querying from a dropdown menu (as below) and I want to use the StocktakeID as a parameter for the query to return the table of stock with the stocktakeID.

<form method="POST" action="loadstock.inc.php"> 
    <select name="filter_stocktake" id="filter_stocktake" class="form-control" required>
        <option value="">Select a stocktake:</option>               
        <?php         
        while ($row = sqlsrv_fetch_array($result)) {
        echo '<option value="' . $row["StocktakeID"] . '">' . $row["StocktakeName"] . '</option>';
        }
        ?>
    </select>
</form>

The loadstock.inc.php code below

if (isset($_POST['filter_stocktake']))
{
    $id = $_POST["filter_stocktake"];
    $query = "SELECT [Code], [Name], [BoxQty], [RecordedQuantityInStock],
                        [ActualQuantityInStock], [ActualQuantityEntered], [DiscrepancyNarrative],[Barcode], [QtySoldSinceSnapshot], [StocktakeCountShtItemID]
                    FROM [StockTakeStockSheet]
                    WHERE StocktakeID = '$id'";
    $stmt = $conn->sqlsrv_query($conn, $query);
    while ($row = sqlsrv_fetch_array($stmt)) {
        echo '
             <tr>
                 <td>' . $row["Code"] . '</td>
                 <td>' . $row["Name"] . '</td>
                 <td>' . $row["BoxQty"] . '</td>
                 <td>' . $row["RecordedQuantityInStock"] . '</td>
                 <td>' . $row["ActualQuantityInStock"] . '</td>
                 <td>' . $row["ActualQuantityEntered"] . '</td>
                 <td>' . $row["DiscrepancyNarrative"] . '</td>
                 <td>' . $row["Barcode"] . '</td>
                 <td>' . $row["QtySoldSinceSnapshot"] . '</td>
                 <td>' . $row["StocktakeCountShtItemID"] . '</td>
             </tr>
         ';
    }
        
}
else
{
    $id = null;
    echo "No stocktake ID supplied";
}

All I am getting when I submit the stocktake option is the “No stocktake ID supplied” message.

Below is the AJAX lines based on Dani Krossing’s video –

<script type="text/javascript" language="javascript" >
$(document).ready(function(){
    var stockID = '';
    $("button").click(function(e) {
        var button = $(e.relatedTarget)     
        var stocktakeID = button.data('stockID')
        $("#stock_data").load('includes/loadstock.inc.php', {
            filter_stocktake: stocktakeID
        });
    });
});
</script>

Am I very far away from getting this right? If you had any guidance or resources that you believe would help me get over the line, I would be really appreciative.

If I have left anything out or you require more details, let me know.

Thank you!