Using onchange to relaunch form

JavaScript
1

So I’m trying to populate a drop menu of boat launch options by using an onchange event in my form to reload the page after I select a state and then a lake, which is built after state selection. The state select works perfectly by populating the lakes in the second select, but when selecting the lake, it never reloads the page. Any help is much appreciated.

Here’s my Javascript

<script language=JavaScript>
function narrowState(form) {
var val=form.state.options[form.state.options.selectedIndex].value; 
self.location='add_events.php?st=' + val;
}
</script>
<script language=JavaScript>
function narrowWater(form) {
<?php print("var state=" . $_REQUEST[st] . ";\
");?>
var val=form.water.options[form.water.options.selectedIndex].value; 
self.location='add_events.php?st='+ state'&water='+ val;
}
</script>

Here is the portion of the form

<table align="left" width="100%">
    <tr> 
        <td align="right" width="25%">State:</td>
        <td align="left" width="75%">
        <?php
            $getState = @mysql_query("SELECT state_abbv, state_name FROM states ORDER BY state_abbv");
        ?>
        <select name='state' onChange="narrowState(this.form)"><option value=''>- Select State -</option>
        <?php
            while($result = mysql_fetch_array($getState)) {
                if($result['state_abbv']==@$_REQUEST['st']){
                    echo "<option selected value='$result[state_abbv]'>$result[state_name]</option>"."<br />";
                }	else {
                    echo "<option value='$result[state_abbv]'>$result[state_name]</option>";
                }
            }
        ?>
        </select>
        <span class="tip"> Select the State to narrow Lake options</span>
        </td>
    </tr>
    <tr> 
        <td align="right" width="25%">Lake:</td>
        <td align="left" width="75%">
        <?php
            $getWater = @mysql_query("SELECT water_id, water_name FROM water WHERE water_state='$_REQUEST[st]' ORDER BY water_name");
        ?>
        <select name='water' onChange="narrowWater(this.form)"><option value=''>- Select Water -</option>
        <?php
            while($result = mysql_fetch_array($getWater)) {
                if($result['water_id']==@$_REQUEST['water']){
                    echo "<option selected value='$result[water_id]'>$result[water_name]</option>"."<br />";
                }	else {
                    echo "<option value='$result[water_id]'>$result[water_name]</option>";
                }
            }
        ?>
        </select>
        <!-- <span class="tip"> Select the Water to narrow Launch options</span> -->
        </td>
    </tr>
2

There is a tiny problem with your script at the moment. The self.location will fail because of a missing “+” character.

self.location=‘add_events.php?st=’+ state + ‘&water=’+ val;

3

Thanks AussieJohn. Your change embarrased me, then led me to the end problem, undefined variable. Had to change my php inside the script. I don’t think I’ve ever used php inside javascript before, so I’m always learning.

Had to change

<?php print("var state=" . $_REQUEST[st] . ";\
");?>

to

var state='<?php print($_REQUEST[st]);?>';

in the narrowWater function

Thanks again. Can always count on this forum for help.
SitePoint rules!