3

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");
}
4

3 回答 3

1

Colors是您的 div 的名称，但我认为您希望在您的复选框上触发 on-change，其名称为color，而没有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)
    });
})
于 2012-12-14T18:17:21.907 回答
0

#colors正在寻找带有 的元素id='colors'。要找到一个类，你的选择器必须以点开头，像这样.color。在您的任务中，更改<div class="colors">为<div id="colors">

我也没有找到带有id=indexMain( $("#indexMain")) 的元素。

你的代码可以这样写：

<script>
$(function() { // short form of jQuery usage
    $(".color").change(function() {
        console.log("changed...");
        var data = $(this).serialize();
        console.log(data);
        $("#indexMain").load("index.php?data="+data)
    })
})
</script>

....

<select class="color"> // your options here
    <option value="option1">Option 1</option> 
    <option value="option2">Option 2</option>
</select>

....

<div id="indexMain"></div>

但它使用了一个选择列表，我没有对其进行测试——在编辑器中编写了代码。

于 2012-07-31T16:23:36.460 回答
0

也许你的意思是：

  $('input[name=color]').change(....
于 2012-12-14T18:05:48.223 回答