Javascript not reloading DIV's contents correctly
<p>I have been looking online for a tutorial on how to create a Checkbox form which would cause a DIV where I show my items from a MYSQL table to reload based on the filter selected in the Checkbox.</p>

<p>This is my code so far, but it doesn't seem to work...</p>

<p>Any suggestions?</p>

<p>Thanks!</p>

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

<p>and I get the value in my div as follows:</p>

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