CODEWITHSUNDEEP
phpjavascriptmysqlajax
Brendon
Brendon

Reputation: 693

Double dropdown menu - php MySQL Ajax

I have two MySQL tables:

  1. 'country' with fields: 'country_id' and 'country'
  2. 'city' with fields: 'city_id', 'city', 'city_link' and 'country_id'

I want to build a html double drop down where the user can select a 'country' and then a 'city' based on the 'country'. Also, once a 'city' has been selected I want there to be an onClick event using the href 'city_link' which takes the user to another page.

There's two files (ajaxcalling.php):

<?
include("/connection.php");
$ID=$_REQUEST['country_id'];
$connect=mysql_connect($hostname_c, $username_c, $password_c);
echo 'Details:<select name="details" width="100">';
$result = mysql_db_query($database, "SELECT * FROM c_city WHERE country_id=".$ID);
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
 echo "<option value=".$row['city_id'].">".$row['city']."</option>";
}
echo '</select>';
mysql_close($connect);
?>

AND (dropdown.php)

<script>

function CreateXmlHttpObject() { //function to return the xml http object
    var xmlhttp=false;  
    try{
        xmlhttp=new XMLHttpRequest();//creates a new ajax object
    }
    catch(e)    {       
        try{            
            xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
//this is for IE browser
        }
        catch(e){
            try{
            req = new ActiveXObject("Msxml2.XMLHTTP");

//this is for IE browser
            }
            catch(e1){
                xmlhttp=false;//error creating object
            }
        }
    }

    return xmlhttp;
}


  function CategoryGrab(strURL)
 {         
 var req = CreateXmlHttpObject(); // function to get xmlhttp object
 if (req)
 {
  req.onreadystatechange = function()
 {
  if (req.readyState == 4) { //data is retrieved from server
   if (req.status == 200) { // which reprents ok status                    
     document.getElementById('details').innerHTML=req.responseText;

//put the results of the requests in or element
  }
  else
  { 
     alert("There was a problem while using XMLHTTP:\n");
  }
  }            
  }        
req.open("GET", strURL, true); //open url using get method
req.send(null);//send the results
 }
}

</script>

<?
include("connection.php");
$connect=mysql_connect($hostname_c, $username_c, $password_c)
  or die ("Mysql connecting error"); 

echo '<table align="center"><tr><td><center><form method="post" action="">Category:
<select name="category"         
onChange="CategoryGrab('."'".'ajaxcalling.phpcountry_id='."'".'+this.value);">';
$result = mysql_db_query($database, "SELECT * FROM c_country");
$nr=0;
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
$nr++;
echo "<option value=".'"'.$row['country_id'].'" >'.$row['country']."</option>";
}
echo '</select>'."\n";
echo '<div id="details">Details:<select name="details" width="100" >';
$result = mysql_db_query($database, "SELECT * FROM c_city WHERE country_id=1");
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
 echo "<option value=".$row['city_id'].">".$row['city']."</option>";
}
echo '</select></div>';
echo '</form></td></tr></table>';

mysql_close($connect);
?>

Here's a link

Really would appreciate some help as I've been stuck on this a while...

Upvotes: 0

Views: 4439

Answers (2)

phpmeh
phpmeh

Reputation: 1792

<?PHP
/*

1)  Passing variables to ajax is the same as submitting forms.  You should never trust user input.  You should always validate the data.  You should prevent SQL injection.  
2) Open needs to go before onstatereadychange function
*/

?>

<html>
<head>
<script language="javascript"> 

  function CategoryGrab(strURL)
 {         
 var req = CreateXmlHttpObject(); // function to get xmlhttp object
 if (req)
 {
  req.onreadystatechange = function()
 {
  if (req.readyState == 4) { //data is retrieved from server
   if (req.status == 200) { // which represents ok status                    
     document.getElementById('details').innerHTML=req.responseText;

//put the results of the requests in or element
  }
  else
  { 
     alert("There was a problem while using XMLHTTP:\n");
  }
  }            
  }        
req.open("GET", strURL, true); //open url using get method
req.send(null);//send the results
 }
}

// what I use:
// Pretty sure you're open needs to go before the onreadystatechange function
function makeAjaxGetRequest(url, output, image) {
  if( image == 1 ){
      document.getElementById(output).innerHTML='<img src="./images/template/ajax-loader.gif"></img>'; 
  }
  if(xmlhttp) { 
    xmlhttp.open("GET",url,true); 
    xmlhttp.onreadystatechange = function(){
       if (xmlhttp.readyState == 4) {
         if(xmlhttp.status == 200) {
           document.getElementById(output).innerHTML=xmlhttp.responseText; //Update the HTML Form element 
         }
         else {
            alert("Error during AJAX call.");
         }
       }    
    }
    xmlhttp.send(null); //Posting txtname to PHP File
  }
}

</script>

Upvotes: 0

Kishore
Kishore

Reputation: 1912

first of all your the link you have provided is messed up it doesnt display anything. i did a view source and found couple of things.

  1. your script tag is out side the tag.
  2. the script tag you have used to link javascript file is wrong you should close the script tag. some thing like this 
<script type="text/javascript" src="path to ur file"></script>

for dependent here are couple of links

www.huanix.com/files/dependent_select/dependent_select.php

http://bytes.com/topic/php/answers/708593-dependent-dropdown-list-mysql

http://www.plus2net.com/php_tutorial/ajax_drop_down_list.php

Upvotes: 1

Related Questions