Apply a filter to a dropdown menu

paradox28491 · February 23, 2009

Hi, not sure if this is the right term for it, but I'm trying to apply a filter to a dropdown menu. The result should be that if you select one of the options from a dropdown menu, it will filter the next menu so that only database rows which contain that value in a certain field will be displayed.

The first drop down in my code is the one which contains the filter options while the second one generates a list of options from a table. I would like to be able to just have it check if the field contains the selected filter rather than if they are exactly the same. This is because some of the data in the field contains the value I want to filter and some other data as well.

<form name="form2" id="form2">
  <select name="jumpMenu2" id="jumpMenu2" onchange="MM_jumpMenu2('parent',this,0)">
    <option selected="selected">Select a Manufacturer</option>
    <option>ASRock</option>
    <option>ASUS</option>
    <option>BIOSTAR</option>
    <option>DFI</option>
    <option>ECS</option>
    <option>EVGA</option>
    <option>FOXCONN</option>
    <option>GIGABYTE</option>
    <option>Intel</option>
    <option>JETWAY</option>
    <option>MSI</option>
    <option>PCCHIPS</option>
    <option>PNY Technologies, Inc.</option>
    <option>Supermicro</option>
    <option>TuL</option>
    <option>XFX</option>
    <option>ZOTAC</option>
  </select>
</form>
<p> </p>
<form name="form" id="form">

  <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">

<?php
$result = mysql_query('SELECT mobo_name FROM mobo');
while ($row = mysql_fetch_assoc($result))
{
  	echo '<option value="' . $row['mobo_name'] . '">' . $row['mobo_name'] . '</option>';
}
?>
  </select>
</form>

So far the two tables work well, it's just connecting the two that is giving me troubles.

paradox28491 · February 24, 2009

I've been trying to figure this out on my own and I haven't come any closer to making it work.

I've been wondering if I could somehow set a variable depending on what is selected from the first menu. Then I could search for it in my field to see if each row contains it and then only display the rows that do. I just have no idea how to do it in code and would really appreciate some help.

I've found countless threads on google about the subject but they all come down to someone just pasting a huge blob of code without actually explaining how to do this.

Again, all I'm trying to do is populate a dropdown menu with only rows in my database which contain a variable which is selected from another already populated dropdown. Please, could someone give me a hand? Even just point me in the right direction, I have no idea what aspect of php to use.

phpdragon · February 24, 2009

Hi Check out my repty to this post, it will do what you wish

http://www.phpfreaks.com/forums/index.php/topic,240137.0.html

and here is it working in action Play with the country and state drop downs

https://buildfits1.buildfit.com/ausglobal/register.php

paradox28491 · February 24, 2009

Alright thanks for the help. I've been trying to get that code to work and made tables of my own with values that should work with that code. I can't figure out what I'm doing wrong here, but when I run my ajax1.html with javascript in the head only the 'select country' dropdown is displayed and it is not populated with countries. I edited in my database connection and tried to put an extra dropdown into ajax1.html, but it didn't work(could have done it wrong).

I have 2 files, the statecall.php and ajax1.html. Should there be more? I saw a tutorial once that had a .js file as well. Can someone tell me what I'm doing wrong?

ajax1.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javaScript" type="text/javascript">
function getXMLHTTP() { //fuction to return the xml http object
      var xmlhttp=false;   
      try{
         xmlhttp=new XMLHttpRequest();
      }
      catch(e)   {      
         try{         
            xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch(e){
            try{
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e1){
               xmlhttp=false;
            }
         }
      }
          
      return xmlhttp;
    }

function getState(codeId)
{
   var strURL="statecall.php?countrycode="+codeId;
   var req = getXMLHTTP();
   if (req)
   {
     req.onreadystatechange = function()
     {
      if (req.readyState == 4)
      {
    // only if "OK"
    if (req.status == 200)
         {
       document.getElementById('statediv').innerHTML=req.responseText;
    } else {
         alert("There was a problem while using XMLHTTP:\n" + req.statusText);
    }
       }
      }
   req.open("GET", strURL, true);
   req.send(null);
   }
}
</script>
<title>Untitled Document</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<tr>
      <td align="left" valign="middle"><label for="country">State:  </label>
        <select name="country" id="country" onChange="getState(this.value);">
          <option value="--Please Select Country--">--Please Select Country--</option>
      <?php  // print category combo box
         $sql = "SELECT name,ccode FROM countries ORDER BY name ASC";
         $result = mysql_query($sql);
         while ($result_row = mysql_fetch_array($result)) {
         $cname = $result_row["name"];
         $cid = $result_row["ccode"];
         echo "<option value='$cid'";
         if ($usercountry==$cid) { echo " selected='selected'";
         }
         echo ">$cname</option>\n";
         }
         ?>
     </select>  <font face="Geneva, Arial, Helvetica, sans-serif" color="#FF0000"><b>R</b></font></td>
    </tr>
    <tr>
      <td align="left" valign="middle"><label for="state"> State:  </label><div id="statediv"><?php include('statecall.php'); ?></div></td>
    </tr>
</form>
</body>

</html>

statecall.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<select name="state" id="state">
<option value='--Please Select State/Province--'>--Please Select State/Province--</option>
<?php  
include("Connections/connection.php");
// print state select box
// convert country code to country name
     if (!$countrycode) { $countrycode = $usercountry; }
     $getcnty = "SELECT * FROM countries WHERE ccode='$countrycode'";
     $resultcnty = mysql_query($getcnty);
     $selectcnty = mysql_fetch_array($resultcnty);
     $cntyname = $selectcnty["name"];
         $querystate = "SELECT * FROM states WHERE code='$countrycode' ORDER BY nameorder";
         $result = mysql_query($querystate);
         while($row_result = mysql_fetch_array($result)) {
         $statename = $row_result["name"];
         if ($statename) {
         if ($statename!=$userstate) { echo "<option value='$statename'>$statename</option>\n";
         }
         }
         }
         if (!empty($userstate)) { echo "<option value='$userstate' selected='selected'>$userstate</option>\n";
         }
         if (!$statename) {
         if (!empty($cntyname)) {
         echo "<option value='$cntyname' selected='selected'>$cntyname</option>\n";
         }
         }
?>
</select>  <font face="Geneva, Arial, Helvetica, sans-serif" color="#FF0000"><b>R</b></font>

</body>
</html>

phpdragon · February 24, 2009

try calling your ajax1.html file ajax1.php i think you will see a difference no other javascript is required, you also have no database connection on ajax1 page

phpdragon · February 24, 2009

remove this from statecall.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

</body>
</html>

also make sure you are calling your table names from the database not mine, if the table column names dont match your queries they wont work, they are usually case sensitive aswell.

paradox28491 · February 25, 2009

Ok I've done all that and the country box is working correctly. However the state box is unresponsive.

I have two tables. The first is called countries and it has two fields. They are name and ccode. Name contains names of countries, ccode is an auto incrementing integer.

The second is called states. It contains a field called name and a field called code. name contains states, code contains the corresponding ccode.

I haven't changed any variables in the original code posted. I changed the database connection. I noticed in your original post you have "1.Insert a javascript to perform the ajax call, this scripts has 3 elements you can configure, they are var strURL value, in this case (statecall.php?countrycode) this is the page it calls and loads the second select box with. The other is document.getElementById, in this case (statediv), this is the name of the div tag that will be updated in your page."

I'm unsure what the third element is. Are there any things I need to change other than the database connection? Do I need anything special installed other than wampserver(php, mysql, apache) for the javascript to work?

Again, thank you so much for your help.

ajax1.php:

<?php
error_reporting(E_ALL ^ E_NOTICE);
require_once('Connections/connection.php')
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javaScript" type="text/javascript">
function getXMLHTTP() { //function to return the xml http object
      var xmlhttp=false;   
      try{
         xmlhttp=new XMLHttpRequest();
      }
      catch(e)   {      
         try{         
            xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch(e){
            try{
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e1){
               xmlhttp=false;
            }
         }
      }
          
      return xmlhttp;
    }

function getState(codeId)
{
   var strURL="statecall.php?countrycode="+codeId;
   var req = getXMLHTTP();
   if (req)
   {
     req.onreadystatechange = function()
     {
      if (req.readyState == 4)
      {
    // only if "OK"
    if (req.status == 200)
         {
       document.getElementById('statediv').innerHTML=req.responseText;
    } else {
         alert("There was a problem while using XMLHTTP:\n" + req.statusText);
    }
       }
      }
   req.open("GET", strURL, true);
   req.send(null);
   }
}
</script>
<title>Untitled Document</title>
</head>

<body>
<tr>
      <td align="left" valign="middle"><label for="country">State:  </label>
        <select name="country" id="country" onChange="getState(this.value);">
          <option value="--Please Select Country--">--Please Select Country--</option>
      <?php  // print category combo box
         $sql = "SELECT name,ccode FROM countries ORDER BY name ASC";
         $result = mysql_query($sql);
         while ($result_row = mysql_fetch_array($result)) {
         $cname = $result_row["name"];
         $cid = $result_row["ccode"];
         echo "<option value='$cid'";
         if ($usercountry==$cid) { echo " selected='selected'";
         }
         echo ">$cname</option>\n";
         }
         ?>
     </select>  <font face="Geneva, Arial, Helvetica, sans-serif" color="#FF0000"><b>R</b></font></td>
    </tr>
    <tr>
      <td align="left" valign="middle"><label for="state"> State:  </label><div id="statediv"><?php include('statecall.php'); ?></div></td>
    </tr>
</body>

</html>

statecall.php:

<select name="state" id="state">
<option value='--Please Select State/Province--'>--Please Select State/Province--</option>
<?php  
include("Connections/connection.php");
// print state select box
// convert country code to country name
     if (!$countrycode) { $countrycode = $usercountry; }
     $getcnty = "SELECT * FROM countries WHERE ccode='$countrycode'";
     $resultcnty = mysql_query($getcnty);
     $selectcnty = mysql_fetch_array($resultcnty);
     $cntyname = $selectcnty["name"];
         $querystate = "SELECT * FROM states WHERE code='$countrycode' ORDER BY nameorder";
         $result = mysql_query($querystate);
         while($row_result = mysql_fetch_array($result)) {
         $statename = $row_result["name"];
         if ($statename) {
         if ($statename!=$userstate) { echo "<option value='$statename'>$statename</option>\n";
         }
         }
         }
         if (!empty($userstate)) { echo "<option value='$userstate' selected='selected'>$userstate</option>\n";
         }
         if (!$statename) {
         if (!empty($cntyname)) {
         echo "<option value='$cntyname' selected='selected'>$cntyname</option>\n";
         }
         }
?>
</select>  <font face="Geneva, Arial, Helvetica, sans-serif" color="#FF0000"><b>R</b></font>

phpdragon · February 25, 2009

3 was a typo sorry I think i changed it after to 2

you dont have any form or table tags tags around your form on ajax1.php add the following straight under the <body> tag

<table cellpadding="0" cellspacing="0" border="0" align="center">
  <form action="<?php $_SERVER['PHP_SELF']?>" method="post" target="_self">

and this just above </body> tag

</form>
</table>

phpdragon · February 25, 2009

also add this to the top php tag just under you db connection

if (!empty($_POST[['country'])) { $usercountry = $_POST['country']; }

Sign In

Apply a filter to a dropdown menu

Recommended Posts

paradox28491

Link to comment

Share on other sites

paradox28491

Link to comment

Share on other sites

phpdragon

Link to comment

Share on other sites

paradox28491

Link to comment

Share on other sites

phpdragon

Link to comment

Share on other sites

phpdragon

Link to comment

Share on other sites

paradox28491

Link to comment

Share on other sites

phpdragon

Link to comment

Share on other sites

phpdragon

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information