Dynamic Dropdown List with PHP

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
Live24x7
Forum Contributor
Posts: 194
Joined: Sat Nov 19, 2011 9:32 am

Dynamic Dropdown List with PHP

Post by Live24x7 »

I have a database which has the names of 33 states and around 5000 cities of India.
I need to have a form where a person first chooses his state and based upon the chosen state, the second drop down lists all the cities for that state.

I have already written a code which works well in achieving this.
However, the 2nd list is populated only when the user selects the state from the first list and presses the SUBMIT button.

I need the following changes:
1. the city list should be populated , as soon as the user SELECTS his option in the state dropdown.
SUBMIT button should not be required.

2. In the current code, While the city list is populated correctly, the first drop down gets reset to the starting value in the state list. I want it to remain at the user selected state.

Please suggest changes to achieve this.

Here's my code.

Code: Select all


<?php
function database_connect($select_database)
{
    $resource_link = mysql_connect("localhost", "root", "");
    if (mysql_select_db($select_database, $resource_link)) {
        return $resource_link;
    } else {
        echo "Cannot connect to DB";
        return false;
    }
}
//function to display state dropdown
function print_state_dropdown($query, $link){  
$queried = mysql_query($query, $link); 
$menu = '<select name="state">';  
while ($result = mysql_fetch_array($queried)) {
        $menu .= '<option value="' . $result['state'] . '">' . $result['state'] . '</option>'; } 
    $menu .= '</select>';
    return $menu;
}

echo '<form method="post" action="">';
echo print_state_dropdown("SELECT DISTINCT state FROM pinlist", database_connect("rakta"));
echo '<input type="submit" name="submit" value="submit"/>
    </form>';
    
    if (isset($_POST['submit'])) {
    
     $state=$_POST['state']; 
    /// function to populate city names for a given state
    function print_city_dropdown($query, $link){
    $queried = mysql_query($query, $link);
    $menu = '<select name="city">';
    while ($result = mysql_fetch_array($queried)) {
        $menu .= '
      <option value="' . $result['city'] . '">' . $result['city'] . '</option>';
    }
    $menu .= '</select>';
    return $menu;
}

//Display City Dropdown form
echo '<form method="post" action="">';
echo print_city_dropdown("SELECT DISTINCT city FROM pinlist WHERE state='$state'", database_connect("rakta"));
echo '<input type="submit" name="submit" value="submit"/>
    </form>';
    
    }
              
    ?>

Thanks a Lot !
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Dynamic Dropdown List with PHP

Post by Celauran »

Use an AJAX call triggered by the onchange event in the first list.
Live24x7
Forum Contributor
Posts: 194
Joined: Sat Nov 19, 2011 9:32 am

Re: Dynamic Dropdown List with PHP

Post by Live24x7 »

thanks.Very helpful..

Always wondered, what good AJAX served ?
Got the answer now :P
Live24x7
Forum Contributor
Posts: 194
Joined: Sat Nov 19, 2011 9:32 am

Re: Dynamic Dropdown List with PHP

Post by Live24x7 »

@Celauran

Thanks.. i got what i exactly wanted.
With this ventured into the world of possibilities with AJAX :D
Live24x7
Forum Contributor
Posts: 194
Joined: Sat Nov 19, 2011 9:32 am

Re: Passing Values from AJAX area to the main form

Post by Live24x7 »

I currently have a form with a dropdown box, and when the value in the dropdown changes, a PHP file with some more form elements get loaded via AJAX function into the main form.

However when I submit the form (using just the non-AJAX way) the values from the 'ajaxed' area of the form are not included in the $_POST values.

How can i include the AJAX form values when the form is submitted?

My AJAX code is as follows

Code: Select all


<script type="text/javascript">
function showCity(str)
{ 
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getcity.php?q="+str,true);
xmlhttp.send();
})
</script>
Thanks a lot
Post Reply