Search by selection field

Question

I am creating filters to search for products, having all the products visible, I would like to know how I can make a selection field and by the category that the user chose would only appear products of the same category. I have the following code:

Search by Categories:

<form action="#" method="post">
<select name="categoria">
    <option value="omega3">Ómega-3</option>
    <option value="probioticos">Probióticos</option>
    <option value="nutrientes">Nutrientes Essênciais</option>
    <option value="plantas">Plantas Medicinais</option>
</select>
</form>
 <div class="row">
 <?
 $tag = $_POST['categoria'];
 $result = $connection -> query("select * from produtos where tags like '%$tag%' order by id limit 4");
 while($row = $result -> fetch_array(MYSQLI_ASSOC)){
     $id = $row['id'];
     $titulo = $row['titulo'];
     $resumo = $row['resumo'];
     $imagem = $row['imagem'];
 ?>
    <div class="grid_3">
        <div class="box2 wrap1 wow fadeInLeft" data-wow-delay="0.1s">
            <a href="verproduto.php?id=<?=$id?>"><img class="first" src="<?=$imagem?>" alt=""/></a>
            <div class="caption bggreen equal">
                <h6 class="text_3 colorblue">
                    <a href="verproduto.php?id=<?=$id?>""><?=$titulo?></a>
                </h6>
                <br>
                <p class="colorwhite">
                <?=$resumo?>
                </p>
            </div>
        </div>
    </div>
    <?
     }
     $result -> free();
    ?>

Answer 1

You can do it with Javascript:

<select name="categoria" onchange="this.form.submit();">

And each time you change the category field submit of your form. No need to submit button each time you change the category.

Answer 2

Only one button to submit the form is missing in your code. Add the button after yours select.

<input type="submit" value="Filtrar">

Answer 3

I couldn’t test, but you’ll need to do something like this with AJAX:

$('#select-categoria').on('change', function (e) {
    var selecionado = $("option:selected", this);
    var categoria  = selecionado.val();

    var postForm = {
        'categoria' : categoria
    };

    $.ajax({
        type: 'POST',
        url: 'pagina.php',
        data: postForm,
        dataType: 'json',
        success: function(data) {
            var htmlOutput;

            $.each(data, function(r) {
                htmlOutput += ' <div class="box2 wrap1 wow fadeInLeft" data-wow-delay="0.1s">' +
                                    '<a href="' + r.id + '"><img class="first" src="' + r.imagem + '" alt=""/></a>' +
                                    '<div class="caption bggreen equal">' +
                                        '<h6 class="text_3 colorblue">' +
                                            '<a href="' + r.id + '">' + r.titulo + '</a>' +
                                        '</h6>' +
                                        '<br>' +
                                        '<p class="colorwhite">' +
                                            r.resumo +
                                        '</p>' +
                                    '</div>' +
                                '</div>';
            });

            $('.grid_3').html(htmlOutput);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
        }
    });
});

The PHP code will look something like this:

<?
    if ( isset($_POST['categoria']) ) {
        $categoria = $_POST['categoria'];

        $result = $connection->query("select * from produtos where tags like '%$categoria%' order by id limit 4");
        while( $row = $result->fetch_array(MYSQLI_ASSOC) ) {
            $id     = $row['id'];
            $titulo = $row['titulo'];
            $resumo = $row['resumo'];
            $imagem = $row['imagem'];
        }

        echo json_encode($row);
    } else {
        echo "erro";
    }
 ?>