Search by selection field

Navigation
2

I'm creating some filters to search for products, having the products all visible, I would like to know how I can make a selection field and through the category that the user chooses, only the products of that category would appear. I have the following code:

Search for 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();
    ?>
    
asked by anonymous 19.01.2015 / 16:33

3 answers

2

You can do with JavaScript: 

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

And every time you change the category field will be done submit of your form. No need to submit button every time you change category.

    
19.01.2015 / 17:02
0

Your code is only missing a button to submit the form. Add the button after your select . 

<input type="submit" value="Filtrar">
    
19.01.2015 / 16:55
0

I could not test, but you will 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";
    }
 ?>
    
19.01.2015 / 17:10
How to change the name of the target database when performing the restore? (Class Restore C # .NET) Change navbar style with scroll