Question

I need to create a form with Checkboxes to filter results extracted from a MySQL table. Ideally, after clicking on specific checkboxes, a DIV will be reloaded running the appropriate PHP and PDO query to filter on the selected criteria.

This is my code so far, but it doesn’t seem to work…

Any suggestions?

Thanks!

<script>
    $(document).ready(function() {
        $("#colors").change(function() {
            console.log("changed...");
            var data = $(this).serialize();
            console.log(data);
            $("#indexMain").load("index.php?data="+data)
        });
    })
</script>
<div class="colors">
    <form method="post" action="index.php">
        <?php
            $colors = mysql_query("SELECT DISTINCT color_base1 FROM item_descr ORDER BY color_base1");
            while ($colorBoxes = mysql_fetch_array($colors))
            {
                echo "<input type='checkbox' name='color' value='".$colorBoxes[color_base1]."' /> ".$colorBoxes[color_base1]."<br />";
            }
        ?>
        <input type="submit" onclick="document.formName.submit();" />
    </form>
</div>

and I get the value in my div as follows:

$color = $_POST['color'];
if ($selectedColor == '') 
{
$items = mysql_query("SELECT * FROM item_descr");
}
else 
{
$items = mysql_query("SELECT * FROM item_descr ORDER BY $color");
}

Answer 1

Colors is the name of your div, but I presume you want the on-change to be fired on your checkboxes, whose names are color, without an s.

$(document).ready(function() {
    $("input[type=checkbox][name=color]").change(function() {
        console.log("changed...");
        var data = $(this).serialize();
        console.log(data);
        $("#indexMain").load("index.php?data="+data)
    });
})