PHP/JS: Dynamic Dropboxes and echoing SELECTED value - php

Question

I am currently working with a dynamic dropdown menu(dependable select boxes). I am pulling the values straight from MySQL DB(if your curious here is how i have the DB SETUP). I am able to get the values of each table and display them accordingly. The problem I am having is echoing the SELECTED value of each selct box. I have a created JS function that will request postfile.php which will then echo the SELECTED value of each box. I am not getting anything echoed. I have checked with firebug but nothing is being posted.
How can I make this work? or Am I approaching this wrong? or Is there a better way? EXAMPLE
Working HTML/PHP
<?php
include ('includes/dbConnect.php');
try {
$pdo = get_database_connection();
$sql = "SELECT *
FROM `categories`
WHERE `master_id` = 0";
$statement = $pdo->query($sql);
$list = $statement->fetchAll(PDO::FETCH_ASSOC);
} catch(PDOException $e) {
echo 'There was a problem';
}
?>
<select name="main" id="main" size="7" class="update">
<option value="">Select one</option>
<?php if (!empty($list)) { ?>
<?php foreach($list as $row) { ?>
<option value="<?php echo $row['id']; ?>">
<?php echo $row['name']; ?>
</option>
<?php } ?>
<?php } ?>
</select>
<select name="subc1" id="subc1" size="7" class="update" disabled="disabled" hidden="hidden">
<option value="">----</option>
</select>
<select name="subc2" id="subc2" size="7" class="update" disabled="disabled" hidden="hidden">
<option value="">----</option>
</select>
<select name="subc3" id="subc3" size="7" class="update" disabled="disabled" hidden="hidden">
<option value="">----</option>
</select>
JS
<script type="text/javascript">
$(document).ready(function () {
$('#main).change(function() {
if ($(this).val()!='
') {
$("#subc1").load("postfile.php",{main_id: $(this).val()});
//$("#subc1").removeAttr('
disabled hidden ');
}
});
//code on change of sel_source
$('#subc1 ').change(function() {
if ($(this).val()!='
') {
$("#subc2").load("postfile.php",{subc1_id: $(this).val()});
//$("#colour").removeAttr('
disabled ');
}
});
$('#subc2 ').change(function() {
if ($(this).val()!='
') {
$("#subc3").load("postfile.php",{subc2_id: $(this).val()});
//$("#colour").removeAttr('
disabled ');
}
});
});
</script>
PHP- postfile.php
if(isset($_REQUEST['main_id']) && !empty($_REQUEST['main_id'])) {
try {
include ('../includes/dbConnect.php');
$pdo = get_database_connection();
$sql = ("select * from `categories` where id='".$_REQUEST['main_id']."' ");
$result = $con->prepare($sql);
$result->execute();
$number_of_rows = $result->fetchColumn();
}catch(PDOException $e) {
echo 'There was a problem';
}
if($number_of_rows > 0) {
$output = '<option value="">Select</option>';
while($row = mysql_fetch_assoc($result)) {
$output .= '<option value="'.$row['id'].'">'.$row['name'].'</option>';
}
} else {
$output = '<option value="">Select</option>';
}
echo $output;
}
if(isset($_REQUEST['subc1_id']) && !empty($_REQUEST['subc1_id'])) {
$result = mysql_query("select * from table where id='".$_REQUEST['subc1_id']."' ");
if($number_of_rows > 0) {
$output = '<option value="">Select</option>';
while($row = mysql_fetch_assoc($result)) {
$output .= '<option value="'.$row['id'].'">'.$row['name'].'</option>';
}
} else {
$output = '<option value="">Select</option>';
}
echo $output;
}
if(isset($_REQUEST['subc2_id']) && !empty($_REQUEST['subc2_id'])) {
$result = mysql_query("select * from table where id='".$_REQUEST['subc2_id']."' ");
if($number_of_rows > 0) {
$output = '<option value="">Select</option>';
while($row = mysql_fetch_assoc($result)) {
$output .= '<option value="'.$row['id'].'">'.$row['name'].'</option>';
}
} else {
$output = '<option value="">Select</option>';
}
echo $output;
}

Answer 1

Maybe you would like to use jQuery UI auto-complete. It is easier to use and less code. It has a remote data source also. Try this one, maybe this can solve your problem. http://jqueryui.com/demos/autocomplete/

Answer 2

Add on submit action to the form. In the function use the following:
var Myvar = $('#subc3 :selected').text();