php - 新しい引数に基づいてDIVにコンテンツをリロードさせるJavascriptを使用してDBから結果をフィルタリングする

Question

MySQLテーブルから抽出された結果をフィルタリングするために、チェックボックスを使用してフォームを作成する必要があります。理想的には、特定のチェックボックスをクリックした後、適切なPHPおよびPDOクエリを実行してDIVが再ロードされ、選択された基準でフィルタリングされます。

これはこれまでの私のコードですが、機能していないようです...

助言がありますか？

ありがとう！

<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>

そして、次のようにdivの値を取得します。

$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

Colorscolorはdivの名前ですが、名前が。なしのチェックボックスでオンチェンジを実行する必要があると思います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)
    });
})

Answer 2

#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>

しかし、それは選択リストを使用していて、私はそれをテストしませんでした-エディターでコードを書きました。

Answer 3

おそらくあなたは意味します：

  $('input[name=color]').change(....