asked on

MySQL/PHP Dropdown Box Empty

It works good in firefox 3
when I select country I see provinces in the next dropdown box, when I select Province i get Cities.

However when I try in IE7 (IE6 is probably too old to pay attention too) I see only countries and next dropdown boxes are empty.

http://www.default.com.ds498.alentus.com/pl/index.php

Thank you

<? include ("blocks/db.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></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript">
        function processRequest(url, query, elementId) {
                var request = false;
                if(window.XMLHttpRequest) {
                        request = new XMLHttpRequest();
                } else if(window.ActiveXObject) {
                        try {
                                request = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch(e) {
                                try {
                                        request = new ActiveXObject("Microsoft.XMLHTTP");
                                } catch(e) {
                                        // Ignore
                                }
                        }
                }
                if(request) {
                        request.onreadystatechange = function() {
                                if(request.readyState == 4) {
                                        if(request.status == 200) {
                                                document.getElementById(elementId).innerHTML = request.responseText;
                                        } else {
                                                // Request failed
                                        }
                                }
                        }
                        request.open("GET", url + query, true);
                        request.send(null);
                }
        }
 
        function selectCountry() {
                var country = document.getElementById("country").value;
                document.getElementById("province").innerHTML = '<option value="load">Loading...</option>';
                document.getElementById("province").setAttribute("disabled", "disabled");
                document.getElementById("city").innerHTML = null;
                processRequest("details.php", "?country=" + country, "province");
                document.getElementById("province").removeAttribute("disabled");
        }
 
        function selectProvince() {
                var country = document.getElementById("country").value;
                var province = document.getElementById("province").value;
                document.getElementById("city").innerHTML = '<option value="load">Loading...</option>';
                document.getElementById("city").setAttribute("disabled", "disabled");
                processRequest("details.php", "?country=" + country + "&province=" + province, "city");
                document.getElementById("city").removeAttribute("disabled");
        }</script>
</head>
 
<body>
 
<div id="wrap">
 
        <div id="header">
        <ul id="nav_main"><? include ("blocks/nav.php"); ?></ul>
        <ul id="nav_user"><? include ("blocks/usermenu.php"); ?></ul>
        </div>
 
    <div id="searchbar">
        <ul id="searchtop">
        <form action="index.php" method="post">
 
                <li>Quick Search</li>
                <li><img class="searchbar_img" src="images/lens.png"/></li>
                        <li><input class="searchbar_box" type="text" id="keyword" value="" name="keyword"/></li>
                        <li><?
                                        echo '<select class="searchbar_dropbox" id="country" name="country" onchange="selectCountry();">';
                                        echo '<option value="none" selected="selected"></option>';
                                        $result = mysql_query("SELECT DISTINCT country FROM countries", $db);
                                        while ($row = mysql_fetch_assoc($result)) {
                                                $country = $row["country"];
                                                echo '<option value="' . $country . '">' . $country . '</option>';
                                                }
                                        echo '</select>';
                ?>
            </li>
            <li><?
                                        echo '<select class="searchbar_dropbox" id="province" name="province" onchange="selectProvince();">';
                                        echo '<option value="none" selected="selected"></option>';
                                        $result = mysql_query("SELECT DISTINCT province FROM countries", $db);
                                        while ($row = mysql_fetch_assoc($result)) {
                                                $province = $row["province"];
                                                echo '<option value="' . $province . '">' . $province . '</option>';
                                                }
                                        echo '</select>';
                                ?>
            </li>
            <li><?
                                        echo '<select class="searchbar_dropbox" id="city" name="city">';
                                        echo '<option value="none" selected="selected"></option>';
                                        $result = mysql_query("SELECT DISTINCT city FROM countries", $db);
                                        while ($row = mysql_fetch_assoc($result)) {
                                                $city = $row["city"];
                                                echo '<option value="' . $city . '">' . $city . '</option>';
                                                }
                                        echo '</select>';
                ?>
            </li>
            <li><INPUT TYPE="IMAGE" src="images/go.jpg" ALT="Submit button"></li>
        </form>
        </ul>
  </div>
 
<!-- rest is taken out -->
 
<!-- details.php -->
<?php
        if(isset($_GET['country'])) {
                $connection = mysql_connect("XXXXXXXX", "XXXXX", "XXXXX");
                mysql_select_db("XXX");
                if(isset($_GET['province'])) {
                        // We are looking for cities
                        $result = mysql_query("SELECT DISTINCT city FROM countries WHERE country='" . $_GET['country'] . "' AND province='" . $_GET['province'] . "';", $connection);
                        echo '<option value="none" selected="selected"></option>\n';
                        while ($row = mysql_fetch_assoc($result)) {
                                $city = $row["city"];
                                echo '<option value="' . $city . '">' . $city . '</option>\n';
                        }
                } else {
                        // We are looking for provinces
                        $result = mysql_query("SELECT DISTINCT province FROM countries WHERE country='" . $_GET['country'] . "';", $connection);
                        echo '<option value="none" selected="selected"></option>\n';
                        while ($row = mysql_fetch_assoc($result)) {
                                $province = $row["province"];
                                echo '<option value="' . $province . '">' . $province . '</option>\n';
                        }
                }
        }
?>

Open in new window

ASKER CERTIFIED SOLUTION

scrathcyboy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Goldblum

ASKER

Thank you for this links, they are good, and I did integrate them in my second version of website.
However since I'm not good at Javascript I would like to ask for assistance.
This is what I need:
I need combination of two features: 3 dropdown boxes
Sample: http://www.plus2net.com/php_tutorial/dd3.php
and they have to be disabled (except the first one) until selection is made.
Sample:http://www.plus2net.com/php_tutorial/dd2.php
I've combined two codes and it work 90%. However something is wrong.

Please click the link
http://www.default.com.ds498.alentus.com/pl2/indextest.php

And you will see that second dropdown can't be enabled, third dropdown has all possible selections inside even after selection is limited for example to "colors" in first box. I will need to be able either to disable them and enable them only after previous selection is made, or have them empty. And when they have items inside they have to have only item that are in accordance with previous selection.

$_Post works How you can see after you select and click submit, this is why I took out the self.location='dd3.php?cat=' + val ; from both reload scripts, because it is not necessary to have data in query string, However if it needs to be there than it is ok.

Both codes are attached. Is there something not right?

Is it better to fix it, or there is a code that would do that.

Thank you very much.

<!-- indextest.php -->
<? include ("blocks/db.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>Undefined</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div id="wrap">
 
	<div id="header">
        <img src="images/logo.jpg" alt="" />
        <ul id="nav_main"><? include ("blocks/nav.php"); ?></ul>
        <ul id="nav_user"><? include ("blocks/usermenu.php"); ?></ul>
	</div>
 
    <div id="searchbar"><? include ("dd3.php"); ?></div>
 
<div id="content">
<?php
		$keyword=$_POST['keyword'];
		$cat=$_POST['cat'];
		$subcat=$_POST['subcat'];
		$subcat3=$_POST['subcat3'];
 
		echo " box keyword= $keyword <br> cat#=$cat <br> subcat=$subcat <br> subcat3= $subcat3 ";
 
 
?>
</div>
 
 
 
 
	<div id="footer">
        <ul id="nav_footer"><? include ("blocks/nav.php"); ?></ul>
        <p> <br /> For all inquires please contact the <a href="/">webmaster</a></p>
 	</div>
</div>
<!-- end #wrap -->
 
 
</body>
</html>
 
<!-- dd3.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>
<SCRIPT language=JavaScript>
function reload(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value; 
<!-- self.location='dd3.php?cat=' + val ; -->
 
}
function reload3(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value; 
var val2=form.subcat.options[form.subcat.options.selectedIndex].value; 
 
<!-- self.location='dd3.php?cat=' + val + '&cat3=' + val2 ; -->
}
function disableselect()
{
<?
if(isset($cat) and strlen($cat) > 0){
echo "document.f1.subcat.disabled = false;";}
else{echo "document.f1.subcat.disabled = true;";}
?>
}
function disableselect2()
{
<?
if(isset($cat3) and strlen($cat3) > 0){
echo "document.f1.subcat3.disabled = false;";}
else{echo "document.f1.subcat3.disabled = true;";}
?>
}
</script>
</head>
 
<body onLoad=disableselect()>
	<? @$cat=$_GET['cat']; 
		///////// Getting the data from Mysql table for first list box//////////
		$quer2=mysql_query("SELECT DISTINCT category,cat_id FROM category order by category"); 
		///////////// End of query for first list box////////////
		
		/////// for second drop down list we will check if category is selected else we will display all the subcategory///// 
		//$cat=$HTTP_GET_VARS['cat']; // This line is added to take care if your global variable is off
		if(isset($cat) and strlen($cat) > 0){
		$quer=mysql_query("SELECT DISTINCT subcategory,subcat_id FROM subcategory where cat_id=$cat order by subcategory"); 
		}else{$quer=mysql_query("SELECT DISTINCT subcategory,subcat_id FROM subcategory order by subcategory"); } 
		////////// end of query for second subcategory drop down list box ///////////////////////////
		
		
		/////// for Third drop down list we will check if sub category is selected else we will display all the subcategory3///// 
		//$cat3=$HTTP_GET_VARS['cat3']; // This line is added to take care if your global variable is off
		if(isset($cat3) and strlen($cat3) > 0){
		$quer3=mysql_query("SELECT DISTINCT subcat2 FROM subcategory2 where subcat_id=$cat3 order by subcat2"); 
		}else{$quer3=mysql_query("SELECT DISTINCT subcat2 FROM subcategory2 order by subcat2"); } 
		////////// end of query for third subcategory drop down list box ///////////////////////////
	?>
    	<ul on id="searchtop">
        
        <form method="post" name="f1" action="indextest.php">
 
        	<li>Quick Search</li>
        	<li><img class="searchbar_img" src="images/lens.png"/></li>
		   	<li><input class="searchbar_box" type="text" id="keyword" value="" name="keyword"/></li>
			<li><?
				//////////        Starting of first drop downlist /////////
				echo "<select name='cat' onchange=\"reload(this.form)\"><option value=''>Select one</option>";
				while($noticia2 = mysql_fetch_array($quer2)) { 
				if($noticia2['cat_id']==@$cat){echo "<option selected value='$noticia2[cat_id]'>$noticia2[category]</option>"."<BR>";}
				else{echo  "<option value='$noticia2[cat_id]'>$noticia2[category]</option>";}
				}
				echo "</select>";
				//////////////////  This will end the first drop down list ///////////
				?>
            </li>
            <li><?
				//////////        Starting of second drop downlist /////////
				echo "<select name='subcat' onchange=\"reload3(this.form)\"><option value=''>Select one</option>";
				while($noticia = mysql_fetch_array($quer)) { 
				if($noticia['subcat_id']==@$cat3){echo "<option selected value='$noticia[subcat_id]'>$noticia[subcategory]</option>"."<BR>";}
				else{echo  "<option value='$noticia[subcat_id]'>$noticia[subcategory]</option>";}
				}
				echo "</select>";
				//////////////////  This will end the second drop down list ///////////
            	?>
            </li>
            <li><? 
				//////////        Starting of third drop downlist /////////
				echo "<select onload=disableselect2() name='subcat3' ><option value=''>Select one</option>";
				while($noticia = mysql_fetch_array($quer3)) { 
				echo  "<option value='$noticia[subcat2]'>$noticia[subcat2]</option>";
				}
				echo "</select>";
				//////////////////  This will end the third drop down list ///////////
			?>
            </li>
            <li><INPUT TYPE="IMAGE" src="images/go.jpg" ALT="Submit button"></li>
        </form>
        </ul>
 
</body>
</html>

Open in new window

SOLUTION

scrathcyboy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Goldblum

ASKER

Thank you for your help again, but, still is it possible to find the way?
- programing in PHP
- Javascript, Ajax can be used
- MySQL Database is MUST
- 3 dropdown lists box (Country, State, City)
- List of states doesn't open until Country is selected and so on.

Would be nice to have this script working with MySQL,

Something like that
http://www.plus2net.com/php_tutorial/dd2.php

only changes has to have 3 lists and has to be MySQL driven
If you will find anywhere please let me know.

Thank you again

scrathcyboy

I would ask the question again in PHP and PHP database and assume you will get some new input on the issue. Good luck.