2 drop down menus w/o submit button - php

Question

I would like to know how to submit two drop down menus w/o a submit button. I want to populate the second drop down menu on selection of the first and then be able to echo out the selection of the second drop down menu. Data for the second drop down menu is obtained from a mySQL database. I am using two forms on my page, one for each drop down menu.
<form method="post" id="typeForm" name="typeForm" action="">
<select name="filterType" onchange="document.getElementById('typeForm').submit()">
<option <?php if ($_POST['filterType'] == 'none') print 'selected '; ?> value="none">Filter by...</option>
<option <?php if ($_POST['filterType'] == 'employee') print 'selected '; ?> value="employee">Employee</option>
<option <?php if ($_POST['filterType'] == 'taskName') print 'selected '; ?> value="taskName">Task</option>
</select>
<noscript><input type="submit" value="Submit"/></noscript>
</form>
<form method="post" id="categoryForm" name="typeForm" action="">
<select name="filterCategory" onchange="document.getElementById('categoryForm').submit()">
<option <?php if ($_POST['filterCategory'] == 'none') print 'selected '; ?> value="none"></option>
<?
$count2 = 0;
echo $rowsAffected2;
while ($count2<$rowsAffected2) {
echo "<option value='$filterName[$count2]'>$filterName[$count2]</option>";
$count2 = $count2 + 1;
}
?>
</select>
<noscript><input type="submit" value="Submit"/></noscript>
</form>
I can submit the first form with no problem. It retrieves values into the second drop down menu successfully.But on selecting a value from the second menu the page refreshes and I'm left with an two unselected drop down menus. I tried echoing the $_POST['filterCategory'] and didn't get a result. I tried using onchange="this.form.submit();" in both forms and I still get the same result. Is there a way to do this without using AJAX, JQuery or any complex Javascript script? I require to this completely in PHP.
I want to avoid the second refresh but still be able to gather the $_POST[''] data from the second selection.

Answer 1

use the same form for both selects

Answer 2

You have two ways of doing that.
You can either submit the form using AJAX; that will prevent the whole page from refreshing, and hence, losing the data in both select elements; that is also the coolest way to have it done.
OR
Using a single form, when both the first and second select elements are submitted, use their values to re-create the select elements.
The cleaner way to do it is still the first option; at least, that's what I'll use if I have to do it.