Chained Linked Select Boxes Not Working

[mdmartiny]

Hello everyone how are you all doing? I am still getting used to the new site layout but I am loving it.

 

OK here is my problem, I am trying to get a chained select box thing going on with a form that is on my site. However, I can not get it to work when I pick the category all the second one does is sit there saying wait on it. So I am hoping that someone on here can help me figure it out.

 

I do believe that the problem lies in the jquery code that is at the bottom of the add-ad.php page. I am not sure since I am not a expert or really know anything about Jquery. I am trying to learn as I go along creating this site.

 

So if anyone could help me that would be great.

 

This is my add-ad.php page

<?php
include('../admin/includes/core/init.php');
include('../admin/includes/head.php');
include('../admin/includes/header.php');
include('includes/u-navigation.php'); //This page is located in the user/includes/ directory
include('includes/select.class.php');
?>

<div id="content" class="container_16 clearfix">
<div class="grid_12">
<div class="box">
<h2>Add an Ad</h2>
<form id="select_form">
<p>
<label>Choose a category:</label>
<select id="category">
<?php echo $opt->ShowCategory(); ?>
</select>
</p>
<p>
<label>Choose a sub category:</label>
<select id="type">
<option value="0">choose...</option>
</select>
</p>
<p>
<label>Title</label>
<input type="text" name="title" id="title" />
</p>
<p>
<label>Price</label>
<input type="text" name="price" id="price" />
</p>
<p>
<label>Description</label>
<textarea name="descriptiom" id="description" ></textarea>
</p>
<p>
<label for ="image">Image</label>
<input type="file" name="image" id="image" />
</p>
<input type="submit" value="Add Ad" />
</form>
<div id="result"></div>

</div>
</div>
</div>
<?php include('../admin/includes/footer.php'); ?>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select#type").attr("disabled","disabled");
$("select#category").change(function(){
$("select#type").attr("disabled","disabled");
$("select#type").html("<option>wait...</option>");
var id = $("select#category option:selected").attr('value');
$.post("select_type.php", {id:id}, function(data){
$("select#type").removeAttr("disabled");
$("select#type").html(data);
});
});
$("form#select_form").submit(function(){
var cat = $("select#category option:selected").attr('value');
var type = $("select#type option:selected").attr('value');
if(cat>0 && type>0)
{
var result = $("select#type option:selected").html();
$("#result").html('your choice: '+result);
}
else
{
$("#result").html("you must choose two options!");
}
return false;
});
});
</script>

 

This is my select.class.php page

<?php
class SelectList
{
protected $conn;

public function __construct()
{
$this->DbConnect();
}

protected function DbConnect()
{
include "../admin/includes/core/database/connect.php";
$this->conn = mysql_connect($host,$username,$dbpassword) OR die("Unable to connect to the database");
mysql_select_db($dbname,$this->conn) OR die("can not select the database $dbname");
return TRUE;
}
public function ShowCategory()
{
$sql = "SELECT * FROM category";
$res = mysql_query($sql,$this->conn);
$category = '<option value="0">choose...</option>';
while($row = mysql_fetch_array($res))
{
$category .= '<option value="' . $row['cat_id'] . '">' . $row['c_name'] . '</option>';
}
return $category;
}

public function ShowType()
{
$sql = "SELECT * FROM `sub_category` WHERE `cat_id` = '".$_POST[id]."'";
$res = mysql_query($sql,$this->conn);
$type = '<option value="0">'.$_POST['id'].'/option>';
while($row = mysql_fetch_array($res))
{
$type .= '<option value="' . $row['sub_id'] . '">' . $row['sub_cat_name'] . '</option>';
}
return $type;
}
}

$opt = new SelectList();
?>

 

This is the select_type.php page

<?php
include('includes/select.class.php');
echo $opt->ShowType();
?>