如何在我单击搜索按钮时才显示表格输出

how do i make my table output appear only when i click on the search button

<?php 
require_once 'includes/header.php'; 
if ($_POST) {
    $list = $_POST['categoryList'];
        if ( $list != "") {
            $sql = "SELECT product.product_name, product.product_image, product.category_id, product.active, category.category_name FROm product 
            INNER JOIN category on product.category_id = category.category_id 
            WHERE product.category_id = '".$_POST['categoryList']."' AND product.active = 1";
            $result = $connect ->query($sql);
        }
            /*else{
                $msg = echo 'Select category';
    }*/

}    
?>

HERE i am running a php script to pull data from the database table product

<div class="row">
    <div class="col-md-12">
<div class="card mt-5" style="width: 30rem; margin-left: 25%" >
              <div class="card-header bg-dark text-light"><span class="glyphicon glyphicon-th-list"></span> Categories </div>
              <div class="card-body">
                    <form action="" method="post" enctype="multipart/form-data">
                        <div class="form-group row mt-5 ml-5">
                            <label for="categoryList" class="col-sm-8 col-form-label">Category Name</label>
                            <div class="col-sm-8">
                              <select class="form-control" id="categoryList" name="categoryList">
                                <option value="">--Select--</option>
                                <?php
                                $sql= "SELECT category_id, category_name FROM category where category_status = 1 AND category_status = 1";
                                $result =$connect->query($sql);

                                while ($row = $result->fetch_array()) {
                                    echo '<option value="'.$row[0].'">'.$row[1].'</option>';
                                }
                                ?>                              
                              </select>
                            </div>
                    </div>
                          <div class="col">
                            <button type="submit" onclick="myFunction()" class="btn btn-dark" id="searchButton" style="margin-left: 100px">Search </button>
                        </div>
                    </form>



                </div>

This is the part where i select the categories pulled from the database

</div>      
</div>
</div>
<div id="myDiv">
    <table class="table" id="myTable">
        <thead class="thead thead-dark">
        <th>Photo</th>
                            <th>Name</th>
                            <th>Category</th>
                        </thead>

                        <tbody>
                                <?php

                                @$sql = "SELECT product.product_name, product.product_image, product.category_id, product.active, category.category_name FROM product 
                                    INNER JOIN category on product.category_id = category.category_id 
                                    WHERE product.category_id = '".$_POST['categoryList']."' AND product.active = 1";
                                    $result = $connect ->query($sql);

                                    while($row = $result->fetch_assoc())
                                    {
                                        $imageUrl = substr($row['product_image'], 3);

                                        $name = $row['product_name'];
                                        $category = $row['category_name'];

                                ?>

                        <tr>
                            <td><?php echo '<img class="img-round" src='.$imageUrl.' style="height:30px; width:50px;">'?></td>
                            <td><?php echo $name?></td>
                            <td><?php echo $category?></td>
                        </tr>
                    <?php } ?>
                        </tbody>                    
</table>    
</div>

THIS IS THE TABLE THAT DISPLAYS THE PRODUCTS ON IN THE SELECTED CATEGORY ABOVE

<script>
    $("#navDashboard").addClass('active'); 
    $("#myTable").DataTable();
</script>

THIS IS THE SCRIPT RESPONSIBLE FOR DATATABLE AND ACTIVE NAVBAR

generally what I am doing is using ajax. give your form an id . for example en ajax call after submitting button

    $(document).on('submit', '#show_table', function () {
        event.preventDefault();
        var formData = new FormData($(this)[0]);

        $.ajax({
            type: 'POST',
            url: 'your_file.php',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: (
                function (formData) {
                    $(".result").html(formData)
                }
            )
        });
    });

in the URL pass the name of the file where the call will be made (create a new file). the value from the search input will pass in POST TYPE and then run your query . as you can see the result will display in a div with a class of result. so in the search page create a div

and the table will appear there . the page will not be refreshed based on the event.preventDefault(); hope this give you any help :)

</div>