How to display articles depending on combination of two select/option using php and mysql?

S

stepahryukin2020-02-13 17:51:48

PHP

stepahryukin, 2020-02-13 17:51:48

Hello ! Help me please! It is necessary to make the filter which uses 2 select. Here is an example link . the hitch consists that the data needs to be got by means of 2 select from a DB. I've looked all over but haven't found anything... but here's my attempt at getting it right.
index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <?php 
        require_once 'connect.php';
        require_once 'function.php';
    ?>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
    <body>
        <select id="flats">
            <option value="all">Выберите квартиру</option>
            <?php $filterflat = get_filterflat(); ?>
            <?php foreach ($filterflat as $post): ?>
            <option value="<?=$post["id"]?>"><?=$post["name"]?></option>
            <?php endforeach; ?>
        </select>
        <select id="station">
            <option value="all">Выберите станцию</option>
            <?php $filtermetro = get_filtermetro(); ?>
            <?php foreach ($filtermetro as $post): ?>
            <option value="<?=$post["id"]?>"><?=$post["name"]?></option>
            <?php endforeach; ?>
        </select>
        <?php $posts = get_posts(); ?>
        <?php foreach ($posts as $post): ?>
        <div id="items">
            <div class="item" data-color="<?=$post["flatid"]?>" data-shape="<?=$post["metroid"]?>">
                <div class="infoFlat">
                    <h3><?=$post["flat"]?></h3>
                    <h3><?=$post["metro"]?></h3>
                    <h3><?=$post["price"]?></h3>
                    <p class="b1"><?=$post["time"]?></p>
                </div>
                <div class="itemText">
                    <p><?=$post["texts"]?></p>
                </div>
            </div>
        </div>  
        <?php endforeach; ?>
        <script>
    var flat = document.getElementById('flats');
    var metro = document.getElementById('station');
    var items_el = document.getElementById('items');

    var filter = function() {
        var items = items_el.getElementsByClassName('item');
        for (var i = 0; i < items.length; i++) {
            if ((flat.value == 'all' || flat.value == items[i].dataset.color) &&
                (metro.value == 'all' || metro.value == items[i].dataset.shape)) {
                items[i].style.display = 'block';
            } else {
                items[i].style.display = 'none';
            }
        }
    };

    flat.addEventListener("change", filter);
    metro.addEventListener("change", filter);   
</script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    </body>
</html>

functions.php

require_once 'connect.php';
function get_posts() { // Как и скрипт выводит все статьи сразу
        global $link;
        $sql = " SELECT * FROM order_post ORDER BY rand()";
        $result = mysqli_query($link, $sql);
        $posts = mysqli_fetch_all($result, MYSQLI_ASSOC);
        return $posts;
    }

    function get_filterflat() { // 1.select Выводит все option`ы a именно ('все','1-к квратира','2-к квратир','3-к квратир','Другое')
        global $link;
        $sql = "SELECT * FROM flats";
        var_dump($sql);
        $result = mysqli_query($link, $sql);
        $filterflat = mysqli_fetch_all($result, MYSQLI_ASSOC);
        return $filterflat;
    }

    function get_filtermetro() { // 2.select выврдит станции метро (бульвар Рокоссовского , Курская и т.д.)
        global $link;
        $sql = "SELECT * FROM station";
        $result = mysqli_query($link, $sql);
        $filtermetro = mysqli_fetch_all($result, MYSQLI_ASSOC);
        return $filtermetro;
    }

    function get_allFilters() { // Фильтрация статей по select`ам
        global $link;
        $sql = " SELECT * FROM order_post WHERE metroid = '".$_POST['station']."' AND  flatid = '".$_POST['flats']."' ";
        // var_dump($sql);
        $result = mysqli_query($link, $sql);
        $allfilters = mysqli_fetch_all($result, MYSQLI_ASSOC);
        return $allfilters;
    }

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

G

granty, 2020-02-13
@stepahryukin

You wrote only a page showing "selects" from the database.
1. Your < select id="station"> and < select id="flats"> should be inserted inside < form action=''> ..., make a submit button in it and send the values of the selected selects to the server, and he already on them should select articles from the database and return a page with the results.
You need to add name='' to your selects, by these names you will select the values sent to them from the $_POST/$_GET arrays:
< select id="station" name="station" > and < select id="flats" name ="flats" >
2. The second option is to make an ajax request to the server (passing the values of the selected selects) and insert the response from the server into the page.
Search the internet, there are plenty of examples.
PS: Then you will come across the fact that first the visitor must select < select id="station" name="station">, and depending on the selected station, the list < select id="flats" name="flats" must be dynamically loaded > which are located near this station (and not all available apartments). Otherwise, the meaning of the station selection is lost.
In short, think over the architecture, read about ajax/XMLHttpRequest (it will be easiest to write javascripts using the jquery library).
Ida, examples of the implementation of this on the Internet in bulk.