Problem with refreshing

[zang8027]

I have a drop down box that is being filled by a database. The top drop down box displays states. Then the next drop down box is filled once the state is selected. Im using the onChange function to update the drop downs. The problem is that when i select a state, the state drop down emptys.  Example of this is here: 

 

http://tyzangmedia.com/ClickNDine/html/findrestaurants.php

 

(PA is the only working state atm)

 

Would be nice for their selection to stay after the select it. Any ideas on how to fix it?

 

 

<FORM action="findrestaurants.php" method="POST">
<SELECT NAME="stateList" onChange="this.form.submit()">
<OPTION>Please Select a State
<?php
//Make a connection to the server... connect("servername","username","password")
$link=mysql_connect("localhost","$database","$pass") or die("No server connection".mysql_error());
//connect to our database
$db=mysql_select_db("tyzangme_clickndine") or die("No Database Connection ".mysql_error());
//construct a SQL query that shows all hotels in the city
$query="SELECT * FROM states";
//run the query
$result=mysql_query($query);	

//for each row returned by our query, do what is in curly braces
while($row = mysql_fetch_array($result)){

//store into a variable the ID # for the current row 
$stateID=$row['state_ID'];
//store into a variable the Name for the current row
$stateName=$row['state_name'];
  
//Print out each "<OPTION> with the proper values
print "<OPTION VALUE='$stateID'>$stateName";
}
//close the connection
mysql_close($link);

?>
</SELECT>
</FORM>

[haku]

<SELECT NAME="stateList" onChange="this.form.submit()">

 

You are submitting the form each time. Submitting a form causes the page to re-fresh, which is what is happening.

 

I believe you are trying to have the second drop down menu update instantly without refreshing the page. You need to use a technique called ajax. Explaining Ajax is more than can be done in one thread.

[Psycho]

Well, you don't need to use AJAX - although it would be a more elegant solution.

 

When the page is submitted, you need the PHP code to get the value of the selected state and in addition to using it to determine the list of cities, also use it to default the appropriate selection in the state list.

 

<form action="findrestaurants.php" method="POST">
<select NAME="stateList" onChange="this.form.submit()">
<option>Please Select a State</option>
<?php
    //Make a connection to the server... connect("servername","username","password")
    $link=mysql_connect("localhost","$database","$pass") or die("No server connection".mysql_error());
    //connect to our database
    $db=mysql_select_db("tyzangme_clickndine") or die("No Database Connection ".mysql_error());
    //construct a SQL query that shows all hotels in the city
    $query="SELECT * FROM states";
    //run the query
    $result=mysql_query($query);	

    //for each row returned by our query, do what is in curly braces
    while($row = mysql_fetch_array($result))
    {
        //Print out each "<option> with the proper values	
        $selected = ($_POST['stateList']==$row['state_ID']) ? ' selected="selected"' : '';
        print "<option value=\"{$row['state_ID']}\"$selected>{$row['state_name']}</option>";
    }
    //close the connection
    mysql_close($link);
?>
</select>
</form>

[haku]

Personally, I'd use both - so that there is graceful degradation if the user has javascript turned off.

[landavia]

Personally, I'd use both - so that there is graceful degradation if the user has javascript turned off.

to avoid that..

plz add <noscript>.....</noscript> to warn user for shown/active java

[haku]

Graceful degradation involves writing code that doesn't need noscript tags.

[Psycho]

Graceful degradation involves writing code that doesn't need noscript tags.

I agree.

 

But in this instance, even the current solution - which is not AJAX - requires JavaScript. So, a non-JS solution would require a submit button to be used whenever the select option is changed. It can be a little kludgy, but not a lot of elegant, non-JS options for this type of functinality.

[haku]

I hide the submit button with javascript on pageload. So it's only visible if needed.