Dynamic drop down menu

Misticles

Trying to do this using mysql and php.
I can get the database to populate the menu but Im having trouble getting the dynamic part going.

when user select from dropdown1, dropdown1 is populated, then dropdown3 etc

this is the code I am using to just populate the drop downs.
any ideas would be great


<?php

mysql_connect("localhost", "root", "7mysql12user") or die(mysql_error());
mysql_select_db("exampapers") or die(mysql_error());




$mycat = "course_code";
echo("<label>Course Code</label>
<select name=\"course_code\">");
$result = mysql_query("SELECT * FROM elements");
while ($row = mysql_fetch_array($result)) {
if($row[name] <> $mycat) {
echo("<option>$row[course_code]</option>");
}
}



$mycat = "course_year";
echo("<label>Course Year</label>
<select name=\"course_year\">");
$result = mysql_query("SELECT * FROM elements");
while ($row = mysql_fetch_array($result)) {
if($row[name] <> $mycat) {
echo("<option>$row[course_year]</option>");
}
}




$mycat = "sitting";
echo("<label>Sitting</label>
<select name=\"sitting\">");
$result = mysql_query("SELECT * FROM elements");
while ($row = mysql_fetch_array($result)) {
if($row[name] <> $mycat) {
echo("<option>$row[sitting]</option>");
}
}




$mycat = "subject";
echo("<label>Subject</label>
<select name=\"subject\">");
$result = mysql_query("SELECT * FROM elements");
while ($row = mysql_fetch_array($result)) {
if($row[name] <> $mycat) {
echo("<option>$row[subject]</option>");
}
}



$mycat = "year";
echo("<label>Year</label>
<select name=\"year\">");
$result = mysql_query("SELECT * FROM elements");
while ($row = mysql_fetch_array($result)) {
if($row[name] <> $mycat) {
echo("<option>$row[year]</option>");
}
elseif($row[name] === $mycat) {
echo("<option selected=\"yes\">$row[name]</option>");
}
}
echo("</select><br />");
?>

Eoin

Hi there, if you want to do this on the fly, without the page reloading, then I think you will need to use AJAX / JQuery. I've not used the latter, but it gets mentioned quite often here.

Edit - you can just use JavaScript, but that would mean you have to pull down every value for every dropdown. If it's done using AJAX, then when the user selects the value from dropdown1, a call is made in the background to a page that gets the list of related values for dropdown2, and then you populate the dropdown list with those values.

http://www.bitrepository.com/web-programming/javascript/dynamic-dependent-dropdown-list-us-states-counties.html

hobochris

eoin wrote: »

Hi there, if you want to do this on the fly, without the page reloading, then I think you will need to use AJAX / JQuery. I've not used the latter, but it gets mentioned quite often here.

+1

Ive done this before with ajax its shouldn't take long to do.

Ri_Nollaig

been awhile since ive done php.
but your missing the closing </select> on all but the year combo box.
You are also missing the variables like 'name', 'course_code' etc.

also, you get the combo boxes to be dynamically populated from user events your are probably gonna need some kinda javascript code in there aswell (ajax).
or reload the page after each selection


/edit, was said above, hadnt refreshed the page. wouldnt ajax for the posts be cool too!

Misticles

whats this ajax thing?? though that was stuff ya cleaned the loo with lol

Eoin

It stands for Asynchronous JavaScript And XML.

In a nutshell it means that you can do server-side stuff without having to reload the page.

For example - a lot of webmail services have a feature where you type in the username you want, and press a button that checks to see if it is available. Rather than the whole page reloading to do the search, what happens is that some JavaScript is triggered that loads another webpage in the background, passing in the username that you want to check. That page does the search and then returns a response. The JavaScript on the original page waits for that response and can then update a section of the page accordingly.

Another example is the thanks button on this forum. When you thank a post, it updates the database and adds your name below the post you thanked - but the page itself is never reloaded, even though some serverside actions were carried out.

Misticles

oh right!

Im not much of a computer whizz but I shall google

Misticles

having no luck with this ajax thing!!!!

Eoin

OK, to start with - are all your dropdown lists dependent on the one before it? e.g. You can't select anything from the 2nd one until a choice is selected from the 1st one?

Misticles

not yet, thats what I want to do...

duffman85

If you know a bit of JavaScript AJAX isn't too bad.

This should get you started:
http://www.w3schools.com/ajax/default.asp

Eoin

Misticles wrote: »

not yet, thats what I want to do...

That's what I meant

OK, so you need to break this down into separate parts.

1) When you load the page, you only populate the first dropdown box. Leave the other ones empty.

2) When someone selects a value from the 1st dropdown, you need an onchange event on the dropdown list. This will capture the ID of the selected value.

3) Your JavaScript should then open a connection to another page which returns a list of values for the second dropdown list. You will have to pass in the ID of the value that was selected in the first dropdown list by the user so the second page can tell what set of values to return.

4) Your JavaScript will need to add these values to the second dropdown list.

Then you just repeat steps 2 to 4 for the subsequent dropdown boxes.

Misticles

I kind of get that!

Eoin

OK, here's a simple example I threw together from an example on the web.

[html]
<html>
<head>
<title>Simple Ajax Example</title>
<script language="Javascript">
var xmlHttp;

function getDropdown(theID)
{
if (theID.length == 0)
{
return;
}

xmlHttp=GetXmlHttpObject();

if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}

var url = "getDropdowns.asp?val=" + theID;

xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
var strOutput = xmlHttp.responseText;
if (strOutput.indexOf("\n") > -1)
{
arrOutput = strOutput.split("\n");
for (i = 0; i < arrOutput.length; i++)
{
arrOutputLine = arrOutput.split(",");
document.getElementById("dropdown2").options = new Option(arrOutputLine[1], arrOutputLine[0]);
}
}
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

function doAjax()
{
var theVal = document.getElementById("dropdown1").value;
getDropdown(theVal);
}
</script>
</head>
<body>
<b>Dropdown 1</b>
<select name="dropdown1" id="dropdown1" onchange="doAjax()">
<option value="a1">Dropdown Value 1</option>
<option value="a2">Dropdown Value 2</option>
</select>
<br/>
<b>Dropdown 2</b>
<select name="dropdown2" id="dropdown2"></select>
</body>
</html>

[/html]

The page that returns the dropdown value. It's in ASP, but it's just for the sake of this example:

<%
If Request.QueryString("val") = "a1" Then
	Response.Write("b1,Value 1" & vblf)
	Response.Write("b2,Value 2")
ElseIf Request.QueryString("val") = "a2" Then
	Response.Write("b3,Value 3" & vblf)
	Response.Write("b4,Value 4")
End If
%>

Misticles

thanks for that.
its just getting to work with php now

Misticles

we've gotten this but the last menu wont populate.
from the asterisks, everything else works.
can anyone see a typo or something missing.
thanks...

its based on 3 tables: coursecodetable (fields: courseid, course_code), courseyeartable(fields:yearid, courseid, course_year) and elements(fields: course_code, course_year, subject, sitting, year, link)

<?php

$programme = $progyear = $subjectname = $examyear = null; //declare vars

$conn= mysql_connect("localhost", "root", "pwrd");
$db = mysql_select_db('exampapers',$conn);

if(isset($_GET["programme"]) && is_numeric($_GET["programme"]))
{
$programme = $_GET["programme"];
}

if(isset($_GET["progyear"]) && is_numeric($_GET["progyear"]))
{
$progyear = $_GET["progyear"];
}

if(isset($_GET["subjectname"]) && is_numeric($_GET["subjectname"]))
{
$subjectname = $_GET["subjectname"];
}

if(isset($_GET["examyear"]) && is_numeric($_GET["examyear"]))
{
$examyear = $_GET["examyear"];
}

?>

<script language="JavaScript">

function autoSubmit()
{
var formObject = document.forms;
formObject.submit();
}

</script>

<form name="theForm" method="get">



<select name="programme" onChange="autoSubmit();">
<option value="null"></option>
<option value="1" <?php if($programme == 1) echo " selected"; ?>>DT205</option>
<option value="2" <?php if($programme == 2) echo " selected"; ?>>DT008</option>
</select>

<br><br>



<?php

if($programme != null && is_numeric($programme))
{

?>

<select name="progyear" onChange="autoSubmit();">
<option value="null"></option>

<?php

//POPULATE DROP DOWN MENU WITH course_year FROM A GIVEN course_code

$sql = "SELECT yearid, course_year FROM courseyeartable WHERE courseid = $programme";
$progyears = mysql_query($sql, $conn);

while($row = mysql_fetch_array($progyears))
{
echo ("<option value=\"$row[yearid]\" " . ($progyear == $row["yearid"] ? " selected" : "") . ">$row[course_year]</option>");
}

?>

</select>

<?php

}

?>

<br><br>

<?php

if($progyear != null && is_numeric($progyear) && $programme != null)
{

?>

<select name="subjectname" onChange="autoSubmit();">
<option value="null"></option>

<?php

//POPULATE DROP DOWN MENU WITH subjects FROM A GIVEN course_code, course_year

$sql = "SELECT subject from elements WHERE course_year = $progyear ";
$subjects = mysql_query($sql,$conn);

while($row = mysql_fetch_array($subjects))
{
echo ("<option value=\"$row[subject]\" " . ($subjects == $row["subject"] ? " selected" : "") . ">$row[subject]</option>");
}

?>

</select>

<?php

}

?>

<br><br>

<?php

if($subjectname != null && is_numeric($subjectname) && $programme != null && $progyear != null)
{

?>

<select name="examyear" onChange="autoSubmit();">
<option value="null"></option>

<?php

*********//POPULATE DROP DOWN MENU WITH CITIES FROM A GIVEN course_code, course_year, subject

$sql = "SELECT year from elements WHERE subject = $subjectname ";
$years = mysql_query($sql,$conn);

while($row = mysql_fetch_array($years))
{
echo ("<option value=\"$row[year]\" " . ($years == $row["year"] ? " selected" : "") . ">$row[year]</option>");
}

?>

</select>

<?php

}

?>

</form>

Misticles

can anyone see an error why the last menu wont work?
cant see it at all, ive compared them all and cant see anything thats missing

Eoin

Print out the SQL query and run it directly against your database, and see if you get results as expected. Did you even try the code I posted?

Misticles

ye we tried to do your one, but we came across this one and it was easier to adapt.