使用AJAX，PHP和MYSQL在另一个复选框中显示html表单复选框中的多个值

Question

I have to select sub-category according to the category checked. i am stuck with selecting multiple checkboxes and displaying its value using ajax. i want to use pure ajax and not jquery. i am fetching values of 1 checkbox from database table and now i need to display other checkbox with the values fetched with select query depending upon the multiple checkboxes user checks. i have an idea foreach loop is to be used but cant understand how and where to frame it..Please Help. Thank u. this is the form:

<?php
while($f1=mysql_fetch_row($res))  {
?>
<input type="checkbox" name="chkcat[]" id="chkcat" onChange="showUser(this.value)" value='<?php echo $f1[1]; ?>'>  <?php echo $f1[0]; ?>
<? } ?>
<div> id="txtHint"> </div>

Ajax code that has showUser function

<script>
 function showUser(str) {
 if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
} 

if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
 document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_chkbox.php?q="+str,true);
xmlhttp.send();
}
</script>

and the file that has to fetch sub category according to the category selected and url ie:ajax_chkbox.php is:

while($row = mysql_fetch_array($result)) 
{
echo "<input type=checkbox name=chksubcat[] id=chsubkcat value= $row[0]>  $row[2]"; 
echo "<br>";
}

Answer 1

You can change Dropdown to checkbox

select_cat.php

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".category").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;

$.ajax
({
type: "POST",
url: "select_subcat.php",
data: dataString,
cache: false,
success: function(html)
{
$(".subcat").html(html);
}
});

});

});
</script>

Category :

<select name="category" class="category">
<option selected="selected">--Select Category--</option>
<?php
include('databasefile');
mysql_connect($server,$username,$password)or die(mysql_error());
mysql_select_db($database)or die(mysql_error());
$sql=mysql_query("select cat_name from category order by cat_name");
while($row=mysql_fetch_array($sql))
{
$cname=$row['cat_name'];
echo '<option value="'.$cname.'">'.$cname.'</option>';
} ?>
</select> <br/><br/>

SubCategory :
<select name="subcat" class="subcat">
<option selected="selected">--Select SubCat--</option>
</select>

2.select_subcat.php

<?php
include('databasefile);
mysql_connect($server,$username,$password)or die(mysql_error());
mysql_select_db($database)or die(mysql_error());
if($_POST['id'])
{
$id=$_POST['id'];
$sql=mysql_query("select s_name from subcat_l1 where cat_name='$id'");
while($row=mysql_fetch_array($sql))
{
$sname=$row['s_name'];
echo '<option value="'.$sname.'">'.$sname.'</option>';
}
}
?>
SubCategory :
<select name="subcat" class="subcat">
<option selected="selected">--Select SubCat--</option>
</select>