Return dynamic select to null onChange

I have two select boxes, the second of which is dependent upon the selection in the first. I want to get the second select box (course) to have a value of null when the first box (subject) is changed. Any help on accomplishing this would be greatly appreciated.

This is what I have tried:

Javascript:

function autoSubmit() {
    var formObject = document.forms['theForm'];
    formObject.submit();
}

PHP:

<form name="theForm" method="get">
<select name="subject" onChange="autoSubmit();">
<option value="null">Select a Subject...</option>

<php
$sql = "SELECT DISTINCT subj_name, subj_id FROM table1 ORDER BY subj_name
$result = mysql_query($sql) or die ("couldn't execute query");

while($row = mysql_fetch_array($result))
{
echo ("<option value=\"$row[subj_id]\开发者_运维问答" " . ($subject == $row["subj_id"] ? " 
  selected" : "") . ">$row[subj_name]</option>");        
}
?>          
</select>

<select name="course" onChange="autoSubmit();">        
<option value="null">All Courses</option>        
<php
if($subject != null && is_numeric($subject))
{

$sql = "SELECT DISTINCT subj_id, course_id, course_name FROM table1 
  WHERE subj_id = $subject ORDER BY course_name
$result = mysql_query($sql);

while($row = mysql_fetch_array($result))
{
echo ("<option value=\"$row[course_id]\" " . ($course == $row["course_id"] ? 
  " selected" : "") . ">$row[course_number] - $row[course_name]</option>");        
}
}

?>
</select>
</form>

---

You can put in the onChange of the first select, before the autoSubmit() :

this.form.course.value='null';

or

this.form.course.selectedIndex=0;

This way the value on the get will be ?subject=[the_subject]&course=null ( and then $course == $row["course_id"] will be false ).

( http://jsfiddle.net/HMT34/ )