Page 1 of 1

Dynamic Dropdown List with PHP

Posted: Thu Nov 24, 2011 11:47 am
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 !

Re: Dynamic Dropdown List with PHP

Posted: Thu Nov 24, 2011 11:49 am
by Celauran
Use an AJAX call triggered by the onchange event in the first list.

Re: Dynamic Dropdown List with PHP

Posted: Thu Nov 24, 2011 12:31 pm
by Live24x7
thanks.Very helpful..

Always wondered, what good AJAX served ?
Got the answer now :P

Re: Dynamic Dropdown List with PHP

Posted: Thu Nov 24, 2011 2:05 pm
by Live24x7
@Celauran

Thanks.. i got what i exactly wanted.
With this ventured into the world of possibilities with AJAX :D

Re: Passing Values from AJAX area to the main form

Posted: Fri Nov 25, 2011 10:16 am
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