Как мне разместить несколько сообщений на одной странице, чтобы я мог запросить одну и ту же таблицу в зависимости от каждого сообщения?

Question

У меня есть страница на моем веб-сайте, которая перечисляет всю информацию из моей базы данных MySQL и отображает ее в виде HTML-таблицы. Над моей html-таблицей у меня есть другая html-таблица с кнопками и выпадающим списком с флажками, которые я использую для фильтрации таблицы с информацией о моей базе данных внутри нее. Все мои фильтры работают индивидуально, но когда я пытаюсь заставить их работать вместе, страница перезагружается, и она отображает только отфильтрованную информацию из самого последнего нажатого фильтра. есть ли способ заставить все методы post работать вместе?

Вот пример того, как я хотел бы, чтобы это работало:

(this parts a 
dropdown menu)
[x]loop               rooftop       happy hour
[ ]river north       [yes] [no]     [yes] [no]
[ ]old town
[x]river west
[ ]west loop
[submit]

при отправке все флажки выставлены. Эта часть работает, но если я нажимаю "да" для крыши, появляется только информация для крыши, и кажется, что флажки становятся непроверенными.

// my filter table
    <form method="POST">
        <table id="filter">
            <div id="title"> <h4> Filters </h4></div>
            <tr>
                <th> <h4> Rooftop </h4> </th>
                <th> <h4> Area </h4> </th>
                <th> <h4> Happy Hour </h4> </th>
                <th> <h4> Food </h4> </th>
            </tr>
            <tr>
                <td>
                    <input type="submit" name="rooftop" value="Yes" class="editbtn"/>
                    <input type="submit" name="noRooftop" value="No" class="editbtn"/>
                </td>
                <td>
                    <div id="sortBy">
                        <button onclick="dropDown()" type="button" class="dropbtn"> ‿ </button>
                        <div id="myDropdown" class="dropdown-content">
                        <div id="area">
                            <input type="checkbox" class="get_value" id="loop" name="loop" value="Loop">Loop<br>
                            <input type="checkbox" class="get_value" id="Old Town" name="oldTown" value="Old Town"> Old Town <br>
                            <input type="checkbox" class="get_value" id="River North" name="riverNorth" value="River North"> River North <br>
                            <input type="checkbox" class="get_value" id="River West" name="riverWest" value="River West"> River West <br>
                            <input type="checkbox" class="get_value" id="West Loop" name="westLoop" value="West Loop"> West Loop <br>
                            <input id="areaSubmit" type="submit" value="Search" onclick("submitArea()")>
                        </div>
                    </div>
                </td>
                <td align="center">
                    <input type="submit" name="happyHour" value="Yes" class="editbtn"/>
                    <input type="submit" name="noHappyHour" value="No" class="editbtn"/>
                </td>
                <td>
                    <input type="submit" name="food" value="Yes" class="editbtn"/>
                    <input type="submit" name="noFood" value="No" class="editbtn"/>
                </td>
            </tr>
        </table>

// my php that filters the info
<?php
        require_once("database_connection.php");
        $db = db_connect();

        $loop = $_POST["loop"];
        $oldTown = $_POST["oldTown"];
        $riverNorth = $_POST["riverNorth"];
        $riverWest = $_POST["riverWest"];
        $westLoop = $_POST["westLoop"];
        $rooftop = $_POST["rooftop"];
        $noRooftop = $_POST["noRooftop"];
        $happyHour = $_POST["happyHour"];
        $noHappyHour = $_POST["noHappyHour"];
        $food = $_POST["food"];
        $noFood = $_POST["noFood"];
        $sql = "SELECT bar_name, area, hourStart, hourEnd FROM barInfo WHERE visible = 1";
        if(isset($loop)) {
            $sqlArr = explode(" ", $sql);
            $count = 0;
            foreach($sqlArr as $word){
                if ($word == "AND"){
                    $count += 1;
                }
            }
            if($count > 0){
                $sql .= " OR area = 'Loop'";
            }
            else{
                $sql .= " AND area = 'Loop'";
            }
        }
        if(isset($oldTown)) {
            $sqlArr = explode(" ", $sql);
            $count = 0;
            foreach($sqlArr as $word){
                if ($word == "AND"){
                    $count += 1;
                }
            }
            if($count > 0){
                $sql .= " OR area = 'Old Town'";
            }
            else{
                $sql .= " AND area = 'Old Town'";
            }        }
        if(isset($riverNorth)) {
            $sqlArr = explode(" ", $sql);
            $count = 0;
            foreach($sqlArr as $word){
                if ($word == "AND"){
                    $count += 1;
                }
            }
            if($count > 0){
                $sql .= " OR area = 'River North'";
            }
            else{
                $sql .= " AND area = 'River North'";
            }
        }
        if(isset($riverWest)) {
            $sqlArr = explode(" ", $sql);
            $count = 0;
            foreach($sqlArr as $word){
                if ($word == "AND"){
                    $count += 1;
                }
            }
            if($count > 0){
                $sql .= " OR area = 'River West'";
            }
            else{
                $sql .= " AND area = 'River West'";
            }
        }
        if(isset($westLoop)) {
            $sqlArr = explode(" ", $sql);
            $count = 0;
            foreach($sqlArr as $word){
                if ($word == "AND"){
                    $count += 1;
                }
            }
            if($count > 0){
                $sql .= " OR area = 'West Loop'";
            }
            else{
                $sql .= " AND area = 'West Loop'";
            }
        }

        if(isset($rooftop)) {
            $sqlArr = explode(" ", $sql);
            $count = 0;
            foreach($sqlArr as $word){
                if ($word == "AND"){
                    $count += 1;
                }
            }
            if($count > 0){
                $sql .= " OR rooftop = 1";
            }
            else{
                $sql .= " AND rooftop = 1";
            }
        }

        if(isset($noRooftop)) {
            $sqlArr = explode(" ", $sql);
            $count = 0;
            foreach($sqlArr as $word){
                if ($word == "AND"){
                    $count += 1;
                }
            }
            if($count > 0){
                $sql .= " OR rooftop = 0";
            }
            else{
                $sql .= " AND rooftop = 0";
            }
        }

        if(isset($happyHour)) {
            $sqlArr = explode(" ", $sql);
            $count = 0;
            foreach($sqlArr as $word){
                if ($word == "AND"){
                    $count += 1;
                }
            }
            if($count > 0){
                $sql .= " OR area = 'Loop'";
            }
            else{
                $sql .= " AND area = 'Loop'";
            }
        }
        if(isset($noHappyHour)) {
            $sqlArr = explode(" ", $sql);
            $count = 0;
            foreach($sqlArr as $word){
                if ($word == "AND"){
                    $count += 1;
                }
            }
            if($count > 0){
                $sql .= " OR happyHour = 0";
            }
            else{
                $sql .= " AND happyHour = 0";
            }
        }
        if(isset($food)) {
            $sqlArr = explode(" ", $sql);
            $count = 0;
            foreach($sqlArr as $word){
                if ($word == "AND"){
                    $count += 1;
                }
            }
            if($count > 0){
                $sql .= " OR food = 1";
            }
            else{
                $sql .= " AND food = 1";
            }
        }
        if(isset($noFood)) {
            $sqlArr = explode(" ", $sql);
            $count = 0;
            foreach($sqlArr as $word){
                if ($word == "AND"){
                    $count += 1;
                }
            }
            if($count > 0){
                $sql .= " OR food = 0";
            }
            else{
                $sql .= " AND food = 0";
            }
        }




        $result = mysqli_query($connection, $sql);
?>




// how i post the info as a html table

<?php
    if (mysqli_num_rows($result) > 0) {
        echo "<table id='list'><tr><th><h3>Name</h3></th><th><h3> Area</h3></th><th><h3>Happy Hour Times</h3></th></tr>";
        while($row = mysqli_fetch_assoc($result)) {
            echo "<tr> <th> <h6> " . $row["bar_name"] . "</h6> </th> <th> <h6>" . $row["area"] . "</h6> </th> <th> <h6>" . $row["hourStart"] . "-" . $row["hourEnd"] . "</h6> </th> </tr>";
        }
        echo "</table";
    }
?>

Любая помощь или ресурсы приветствуются Спасибо!

Answer 1

во-первых, нам не нужно видеть вашу функцию submitArea.

Я немного изменил, упростил и обезопасил (не все, но все же ...) ваш код, обратите внимание, что я его не тестировал ...

1) В своем HTML удалите кнопки .editBtn отправки. Для выбора Да / Нет, я предлагаю вам использовать несколько <select> выпадающих или <input type="radio"> кнопок.

<form>
    <table id="filter">
        <div id="title"> <h4> Filters </h4></div>
        <tr>
            <th> <h4> Rooftop </h4> </th>
            <th> <h4> Area </h4> </th>
            <th> <h4> Happy Hour </h4> </th>
            <th> <h4> Food </h4> </th>
        </tr>
        <tr>
            <td>
                <select id="rooftop" class="selectMenu">
                    <option value="">Select an option</option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                </select>
            </td>
            <td>
                <div id="sortBy">
                    <button onclick="dropDown()" type="button" class="dropbtn"> ‿ </button>
                    <div id="myDropdown" class="dropdown-content">
                    <div id="area">
                        <input type="checkbox" class="get_value" id="loop" name="loop" value="Loop">Loop<br>
                        <input type="checkbox" class="get_value" id="Old Town" name="oldTown" value="Old Town"> Old Town <br>
                        <input type="checkbox" class="get_value" id="River North" name="riverNorth" value="River North"> River North <br>
                        <input type="checkbox" class="get_value" id="River West" name="riverWest" value="River West"> River West <br>
                        <input type="checkbox" class="get_value" id="West Loop" name="westLoop" value="West Loop"> West Loop <br>
                        <input id="areaSubmit" type="submit" value="Search" onclick("submitArea()")>
                    </div>
                </div>
            </td>
            <td align="center">
                <select id="happyHour" class="selectMenu">
                    <option value="">Select an option</option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                </select>
            </td>
            <td>
                <select id="food" class="selectMenu">
                    <option value="">Select an option</option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                </select>
            </td>
        </tr>
    </table>
</form>

2) Отправляйте свои области в массиве, а не одну за другой, это упростит цикл и построит ваш запрос, вот простой римейк функции submitArea () с использованием jQuery.

<script>
    function submitArea() {
        var post_vals = {
            params: {
                areas: [],
                rooftop: 0,
                happyHour: 0,
                food: 0
            }
        };
        $(".get_value checkbox:checked").each(function() {
            post_vals.params.areas.push($(this).val());
        });
        $(".selectMenu option:selected").each(function() {
            if($(this).attr("id") == "rooftop") {
                post_vals.params.rooftop = 1;
            } else if($(this).attr("id") == "happyHour") {
                post_vals.params.happyHour = 1;
            } else if($(this).attr("id") == "food") {
                post_vals.params.food = 1;
            }
        });
        alert("Check your console for posted value!");
        console.log("Post values:");
        console.log(post_vals);
        $.getJSON("your_php_script.php", {
            params: params
        }).done(function(data) {
            // For now if you look in the console, you'll only see your query..
            alert("Post finished, check the response in your console.");
            console.log(data);
            // Get your data here and do what ever you want with it, IE: rebuild your table rows if they're not already existing.
        });
    }
</script>

3) Упростите свой PHP и будьте более БЕЗОПАСНЫ с SQL-инъекциями, читайте об этом на Google или на этом сайте. Для примера я назвал его your_php_script.php;)

<?php
require_once("database_connection.php");
$connection = db_connect();

$response = array(
    "status" => "success",
    "data" => array(), // Table data goes in here
    "query" => "" // Temporairy, just for your example to show in your Javascript console
);

if(isset($_GET["params"]) && is_array($_GET["params"])) {

    // Prepare mysql statement
    $sql = "SELECT bar_name, area, hourStart, hourEnd FROM barInfo WHERE visible = 1";

    // Loop over the sent parameters
    foreach($_GET["params"] AS $key => $opt) {
        if($key == "areas") {
            if(is_array($opt)) {
                // HERE Beware that you should check the values before you put them in the query for injections security reasons.
                foreach($opt AS $k => $area) {
                    // Real basic method of doing it.. be aware that this is not bullet proof.
                    $opt[$k] = mysqli_real_escape_string($connection, $area);
                }
                $sql .= " AND area IN ('" . implode("', '", $opt) . "') ";
            }
        } else if($key == "rooftop") {
            if($opt == 1) {
                $sql .= " AND rooftop = 1 ";
            } else {
                $sql .= " AND rooftop = 0 ";
            }
        } else if($key == "happyHour") {
            if($opt == 1) {
                $sql .= " AND happyHour = 1 ";
            } else {
                $sql .= " AND happyHour = 0 ";
            }
        } else if($key == "food") {
            if($opt == 1) {
                $sql .= " AND food = 1 ";
            } else {
                $sql .= " AND food = 0 ";
            }
        }
    }
    $result = mysqli_query($connection, $sql);
    if($result) {
        while($row = mysqli_fetch_assoc($result)) {
            $response["data"][] = $row;
        }
        // Temporairy
        $response["query"] = $sql;
    } else {
        $response["status"] = "error";
        $response["details"] = "MySQL Query error: " . mysqli_error($connection);
    }

} else {
    $response["status"] = "error";
    $response["details"] = "Parameter received is not an array.";
}
echo json_encode($response);

Надеюсь, это поможет.

Answer 2

Вы можете ограничить результаты порядком, упорядочив их по последним, а затем по предыдущим.W3Schools ref: W3Schools SQL - Функции