2

Eu estou a criar uns filtros para pesquisa de produtos, tendo os produtos todos visíveis, eu gostava de saber como posso fazer um campo de seleção e mediante a categoria que o utilizador escolhesse só apareceriam os produtos dessa mesma categoria. Tenho o seguinte código:

Pesquisar por Categorias:

<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();
    ?>

3 Respostas 3

2

Podes fazer com JavaScript:

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

E cada vez que alterares o campo categoria será feito o submit do teu formulário. Sem precisares de botão para submeter cada vez que alteres a categoria.

0

No seu código só está faltando um botão para submeter o formulário. Adicione o botão após o seu select.

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

Não consegui testar, mas você vai precisar fazer algo assim com 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);
        }
    });
});

O código PHP será algo parecido com isso:

<?
    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";
    }
 ?>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .