在表单提交后使用数据库值更新前端表

Question

I have this form which deletes a value from database on form submit and under it a table which shows all the values in the database.

But after the form submit the data table ("remove-table") is not being updated.

Removing works as intended but I would like to have the table to update automatically after the form submit.

<?php session_start(); ?>
<?php include 'head.php';?>

<div class="container">
    <div class="row">
        <div class="col-md-12">

        <form method="POST" action="#" class="remove-files-form">
            <div class="form-group">
                <span>ID (number): </span>
                <input class="form-control remove-control" id="removeTextField" type="text" size="8" name="product_id" placeholder="Insert ID here f.e. 1" required>
                <input class="form-control btn btn-primary"  id="removeButton" type="submit" value="Remove from database by id">
            </div>
        </form>

    <?php
        $mysqli = new mysqli($dbConn,  $dbUser,  $dbPass, $dbName);

        if ($mysqli->connect_errno) {
            printf("Connect failed: %s
", $mysqli->connect_error);
            exit();
        }

        $query = "SELECT id, thumbnailUrl, title, folderName, subfolder FROM MOCK_DATA ORDER by ID ASC";

        if ($result = $mysqli->query($query)) {

            echo "<div class='table-overflow-wrap'>
                  <table class='table remove-table'>";
            echo "<thead>
                      <tr>
                        <th>ID</th>
                        <th>Image</th>
                        <th>Image title</th>
                        <th>Main directory</th>
                        <th>Sub directory</th>
                      </tr>
                  </thead>";

            /* Fetch associative array */
            while ($row = $result->fetch_assoc()) {
                echo "<tr id='$row[id]'>";
                echo "<td><strong>$row[id]</strong></td>";
                echo "<td>
                        <div class='remove-table-thumb' style=\"background-image: url('$row[thumbnailUrl]') \">
                        </div>
                      </td>";
                echo "<td>$row[title]</td>";
                echo "<td>$row[folderName]</td>";
                echo "<td>$row[subfolder]</td>";
                echo "</tr>";   
            }
            echo "</table></div>";

            /* Free result set */
            $result->free();
        }
    ?>

      </div><!-- col -->
   </div><!-- row -->
</div><!-- container -->

<?php
    /* Delete data from database */
    /* File removal from directory todo */

    $sql = "DELETE FROM MOCK_DATA WHERE id=$_POST[product_id]";

    if ($mysqli->query($sql) === TRUE) {
        echo "
            <div class='alert alert-success alert-dismissable $_POST[product_id]'>
                <a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>
                 ID = $_POST[product_id], removed from database!
            </div>";
    }

    /* Close connection */
    $mysqli->close();
?>

<?php include 'footer.php';?>

Answer 1

Change the order and put the DELETE part before the SELECT.

<?php 
session_start();
include 'head.php';

if( $_SERVER['REQUEST_METHOD'] == "POST" && $_POST['product_id'] ) {
    /* Delete data from database */
    /* File removal from directory todo */

    $sql = "DELETE FROM MOCK_DATA WHERE id=$_POST[product_id]";

    if ($mysqli->query($sql) === TRUE) {
        echo "
        <div class='alert alert-success alert-dismissable $_POST[product_id]'>
            <a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>
             ID = $_POST[product_id], removed from database!
        </div>";
    }
    else {
         // SHOW ERROR DELETE MESSAGE
    }
}

?>

<div class="container">
<div class="row">
    <div class="col-md-12">

        <form method="POST" action="#" class="remove-files-form">
            <div class="form-group">
                <span>ID (number): </span>
                <input class="form-control remove-control" id="removeTextField" type="text" size="8" name="product_id" placeholder="Insert ID here f.e. 1" required>
                <input class="form-control btn btn-primary"  id="removeButton" type="submit" value="Remove from database by id">
            </div>
        </form>

        <?php
        $mysqli = new mysqli($dbConn,  $dbUser,  $dbPass, $dbName);

        if ($mysqli->connect_errno) {
            printf("Connect failed: %s
", $mysqli->connect_error);
            exit();
        }

        $query = "SELECT id, thumbnailUrl, title, folderName, subfolder FROM MOCK_DATA ORDER by ID ASC";

        if ($result = $mysqli->query($query)) {

            echo "<div class='table-overflow-wrap'>
              <table class='table remove-table'>";
            echo "<thead>
                  <tr>
                    <th>ID</th>
                    <th>Image</th>
                    <th>Image title</th>
                    <th>Main directory</th>
                    <th>Sub directory</th>
                  </tr>
              </thead>";

            /* Fetch associative array */
            while ($row = $result->fetch_assoc()) {
                echo "<tr id='$row[id]'>";
                echo "<td><strong>$row[id]</strong></td>";
                echo "<td>
                    <div class='remove-table-thumb' style=\"background-image: url('$row[thumbnailUrl]') \">
                    </div>
                  </td>";
                echo "<td>$row[title]</td>";
                echo "<td>$row[folderName]</td>";
                echo "<td>$row[subfolder]</td>";
                echo "</tr>";
            }
            echo "</table></div>";

            /* Free result set */
            $result->free();
        }
        ?>

    </div><!-- col -->
</div><!-- row -->
</div><!-- container -->

<?php
include 'footer.php';
/* Close connection */
$mysqli->close();
?>