Hi,
There are two drop down box named Category, and SubCat. On page load event the Category drop down list is filled. and SubCat drop down is empty.And on selecting the Category drop down box a list of images belonging to Category is displayed and parallely the list of Sub Category should be filled.
The images belonging to Category are displayed but the SubCat drop down list is still empty.
Please help.
<?
include "config.php";
?>
<html>
<head>
<style>
<!--
.dragme{position:relative;}
-->
</style>
<script language="javascript" src="list.js"></script>
<link href="cars.css" rel="stylesheet" type="text/css" />
<script>
<?
echo "
function fillCategory(){
// this function is used to fill the category list on load
";
$q1=mysql_query("select * from jos_categories where section='com_vehiclemanager'");
echo mysql_error();
while($nt1=mysql_fetch_array($q1)){
echo "addOption(document.form1.Category, '$nt1[id]', '$nt1[title]', selected='selected');";
}
// end of while
?>
} // end of JS function
function SelectSubCat(){
// ON or after selection of category this function will work
removeAllOptions(document.form2.SubCat);
addOption(document.form2.SubCat, "", "SubCat", "");
// Collect all element of subcategory for various cat_id
<?
//let us collect all cat_id and then collect all subcategory for each cat_id
$q2=mysql_query("select distinct(catid) from jos_vehiclemanager_vehicles");
// In the above query you can collect cat_id from category table also.
while($nt2=mysql_fetch_array($q2)){
//echo "$nt2[cat_id]";
echo "if(document.form1.Category.value == '$nt2[id]'){";
$q3=mysql_query("select vmodel from jos_vehiclemanager_vehicles where catid='$nt2[catid]'");
while($nt3=mysql_fetch_array($q3)){
echo "addOption(document.form2.SubCat,'$nt3[catid]', '$nt3[vmodel]');";
} // end of while loop
echo "} ";
}
?>
var w = document.form1.Category.selectedIndex;
var v = document.form1.Category.options[w].value;
self.location = "clearancelot.php?v=" +v;
}
function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
//selectbox.options.remove(i);
selectbox.remove(i);
}
}
function addOption(selectbox, value, text)
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
function fillmodel()
{
var val=document.form2.SubCat.selectedIndex;
var m= document.form2.SubCat.options[val].value;
self.location = "clearancelot.php?m=" +m;
}
</script>
</head>
<body onLoad="fillCategory();">
<table width="70%" cellpadding="0" cellspacing="5" class="table-border" border="1">
<tr>
<td colspan="3" align="left"><img src="images/stories/clearance_tab_new_off.gif" /><img src="images/stories/clearance_tab_used_off.gif" /><img src="images/stories/clearance_tab_deal_off.gif" width="157" height="26" /><span style="padding-left:200px">Your zip code <a href="#">change</a>
</span> </td>
</tr>
<tr>
<td colspan="3" style="background-repeat:repeat-x">Top new car bargains in your area</td>
</tr>
<tr>
<td width="33%" colspan="0" class="clearancelot-subtable" style="background-repeat:repeat-x"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="clearancelot-subtable">
<tr>
<td align="center" class="clearancelot-td-text">MSRP Range: $10,000-$65000</td>
</tr>
<tr>
<td background="images/scale-tile.gif" style="background-repeat:repeat-x;"><img src="images/arrow.gif" width="12" height="19" /></td>
</tr>
</table></td>
<td width="40%"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="clearancelot-subtable">
<tr>
<td class="clearancelot-td-text">Search By Make</td>
</tr>
<tr>
<td>
<form id="form1" name="form1" method="post" action="" >
<p align="center">
<select name="Category" tabindex="1" onChange="SelectSubCat();">
<option value="">Select Category</option>
</select>
</p>
</form> </td>
</tr>
</table></td>
<td width="27%" class="clearancelot-subtable"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="clearancelot-subtable">
<tr>
<td class="clearancelot-td-text">Search By Model</td>
</tr>
<tr>
<td><form id="form2" name="form2" method="post" action="">
<p align="center">
<select name="SubCat" id="SubCat" tabindex="1" onChange="fillmodel();">
<option value="">Select Model</option>
</select>
</p>
</form > </td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#CCCCCC" >
<table border="0" cellpadding="0" cellspacing="5" >
<tr>
<td >
<?
$v = $_GET['v'];
$i = 1;
if($v == 0)
{
$query = mysql_query("select image_link from jos_vehiclemanager_vehicles");
}
else
{
$query = mysql_query("select image_link from jos_vehiclemanager_vehicles
where catid=".$v);
}
echo '<table border="0" cellspacing="30" cellpadding="0" bgcolor="#FFFFFF">'
.'<tr>';
while($row=mysql_fetch_array($query))
{
echo '<td>'
.'<img src="components/com_vehiclemanager/photos/'.$row[ 'image_link'].'" width="142" height="73" border="1"/>'
.'</td>';
if($i%4 == 0)
{
echo '</tr>'
.'<tr>';
}
$i++;
}
echo '</table>';
?> </td>
</tr>
</table> </td>
</tr>
</table>
</body>