Solved

MySQL/PHP Dropdown Box Empty

Posted on 2008-10-24
5
1,233 Views
Last Modified: 2013-12-13
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

0
Comment
Question by:Goldblum
  • 3
  • 2
5 Comments
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
ID: 22801213
You are cutting off both feet by using active-X to run what is essentially just 3 options lists, linked together dynamically.  Normal HTML can do all this for you, without using active-X which is MS specific, and if people forced to use IE6 (almost all corporate people at the present time) have active-X enabled, it will not work.

See these links for ways to make linked options lists using just HTML and no active-x --

http://www.mattkruse.com/javascript/dynamicoptionlist/
http://www.plus2net.com/javascript_tutorial/dropdown-list.php
http://www.fiendish.demon.co.uk/html/javascript/listfill.html

There are lots more if you need them.
0
 

Author Comment

by:Goldblum
ID: 22805380
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

0
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 500 total points
ID: 22806078
3 linked drop downs increase the code exponentially.  If there are 5 choices in the first, second and third, that amounts to a total of 125 options in total.  Most people don't realize this.  For each choice in the first list you need to itemize all the second level choices, and for each one in the second list you have that many more choices in the third list.  This is why it is better to use javascript arrays for linked dropdown lists --

http://www.fiendish.demon.co.uk/html/javascript/listfill.html
http://www.google.com/search?num=30&q=javascript+arrays+linked+drop+down+lists
http://www.plus2net.com/javascript_tutorial/list-adding.php

Basicaly 3 levels of dynamically linked dropdown menus needs to be done in javascript.  It can't really be done in PHP without delay reloads.  I have done this before, but it is a lot of coding, depending on the number of options in each list.  It is MUCH more extensive than what you have done.
0
 

Author Closing Comment

by:Goldblum
ID: 31509860
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
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22809743
I would ask the question again in PHP and PHP database and assume you will get some new input on the issue.  Good luck.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
These days socially coordinated efforts have turned into a critical requirement for enterprises.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now