Change Drop Down List

The Code is working but it's not working

Page 1 of 1

7 Replies - 4238 Views - Last Post: 05 June 2009 - 06:15 AM Rate Topic: -----

#1 khnumet  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 25-May 09

Change Drop Down List

Posted 25 May 2009 - 12:20 PM

Greetings,

I recently found a solution here at DreamCode that goes a long way toward doing exactly what I want it to do. Unfortunately it falls just shy of going far enough. Hopefully someone here can show me the little tweak it needs to reach home base.

This is what I want the code to do:

1 The first drop down box is populated from a mysql table called Generation (works fine)
2. The second drop down box displays items from another mysql table called Tree based on the user's selection in the first drop down box (not working)

These two tables have the common field Gen_ID. Apparently this is working because if I change the number in the location bar of my browser to reflect the value of Gen_ID the second drop down box will change to the correct items. However if I just made a selection from the first drop down list nothing happens.

So what I am trying to do is create a family tree with the firs drop down box giving the generations by number (123456). This number is supposed to be reflected in the address bar but as I said at present I have to type it in manually. The second drop down box displays the names of each person connected to a generation by the value of Gen_ID

The code was provided by didgy58 in January of 2008. The code provides for a third drop down box but I just want to get this part to work right now.

Here is my code:

<?php
mysql_connect...;
mysql _select_db...;
?>

<html>

<head>
<title>
Lee Family Reunion
</title>
<script language=Javascript>
function reload(form){
var val=form.generation.options[form.generation.options.selectedIndex].value;
var val2=form.tree.options[form.tree.options.selectedIndex].value;
var val3=form.subcat1.options[form.subcat1.options.selectedIndex].value;

self.location='dd.php?generation=' + val + '&tree=' + val2 + '&subcat1=' + val3;

}
</script>
<script type="text/javascript" src="selectuser.js"></script>
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
</head>

<body bgcolor="#000000" text="#ffffff" link="#80ff00" vlink="#ffffff" alink="#ff0000">
<?
$gen=$_GET['generation']; //This line is added to take care if your global variable is off
$tree=@$_GET['tree'];
$subcat1=@$_GET['subcat1'];


$result=mysql_query("SELECT * FROM Generation") or die(mysql_error());
echo"<form method='post' name='f1' action='self'>";
echo "<select name='generation' onchange=\"reload(this.form)\">";
echo"<option>Choose Generation</option>";

while($row = mysql_fetch_assoc($result)) {
if($row['Generation=']==@$gen){
echo "<option value='$row[Gen_ID]'>$row[Generation]";}
else
{
echo"<option value='$row[Gen_ID]'>$row[Generation]";
}
}
echo "</select>";

echo "<select name='tree' onchange=\"reload(this.form)\">";
echo"<option>Choose Name</option>";
$quer=mysql_query("SELECT Name FROM Tree where Gen_ID='$gen'");

while($row2 = mysql_fetch_assoc($quer)) {
if($row2['Name=']==$tree){

echo "<option value='$row2[Name]'>$row2[Name]";
}
}
mysql_close();
?>
</body>

</html>


Thanx to all who help

Is This A Good Question/Topic? 0
  • +

Replies To: Change Drop Down List

#2 bsaunders  Icon User is offline

  • D.I.C Addict

Reputation: 44
  • View blog
  • Posts: 571
  • Joined: 18-January 09

Re: Change Drop Down List

Posted 25 May 2009 - 02:40 PM

When you make a selection from the drop-down box, what resulting query string do you get?
Was This Post Helpful? 0
  • +
  • -

#3 ShaneK  Icon User is offline

  • require_once("brain.php"); //Fatal error :/
  • member icon

Reputation: 240
  • View blog
  • Posts: 1,224
  • Joined: 10-May 09

Re: Change Drop Down List

Posted 25 May 2009 - 02:47 PM

Greetings
Please :code:
That'll make it easier to read :)

Thanks

Yours,
Shane~

This post has been edited by ShaneK: 25 May 2009 - 02:47 PM

Was This Post Helpful? 0
  • +
  • -

#4 khnumet  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 25-May 09

Re: Change Drop Down List

Posted 25 May 2009 - 03:19 PM

View Postbsaunders, on 25 May, 2009 - 01:40 PM, said:

When you make a selection from the drop-down box, what resulting query string do you get?



In the code the variable $result is assigned to the query string of the first drop down box.
$result=mysql_query("SELECT * FROM Generation");
Was This Post Helpful? 0
  • +
  • -

#5 noorahmad  Icon User is offline

  • Untitled
  • member icon

Reputation: 209
  • View blog
  • Posts: 2,290
  • Joined: 12-March 09

Re: Change Drop Down List

Posted 25 May 2009 - 10:21 PM

try this
<form id="form1" name="form1" method="post" action="">
  <select name="select" id="select">
<?php
while($result = mysql_fetch_assoc($query))
{
?>
<option value="<?php echo $result['column1']?>"><?php echo $result['column1']?></option>
<?php
}
?>
  </select>
</form>

Was This Post Helpful? 0
  • +
  • -

#6 khnumet  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 25-May 09

Re: Change Drop Down List

Posted 27 May 2009 - 06:03 PM

I am thinking the gods of programming just don''t like me.

I used post as my form method at first and then it wouldn't work at all. when I use the get method it works even if only one time.

I'm not happy with it working only one time but I don't want to go bak to it not working at all.
Was This Post Helpful? 0
  • +
  • -

#7 bsaunders  Icon User is offline

  • D.I.C Addict

Reputation: 44
  • View blog
  • Posts: 571
  • Joined: 18-January 09

Re: Change Drop Down List

Posted 27 May 2009 - 07:50 PM

So when you manually type in the query string following the URL, the page loads correctly?
Was This Post Helpful? 0
  • +
  • -

#8 saturnx  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 30
  • Joined: 07-May 09

Re: Change Drop Down List

Posted 05 June 2009 - 06:15 AM

Hi there,

Not too sure if you have found your solution yet but here's my 2cents.

The reason your form failed was because of your javascript syntax. subcat1 select list was not found in your form and you were trying to access it in by javascript which resulted in an error. This caused the javascript to stop what it was doing and will refuse to do anything until you fix that error. Also note that form.generation.etc etc in your javascript is not a valid syntax. Firebug was constantly complaining that there was an error. It should be some thing like document.form.getElementById('generation').selectedIndex.value;

In my version of the javascript i used window.document instead which gives me instant access to the form elements without having to write document.getElmentById().

<script language="javascript" type="text/javascript">
function reload_form()
{
	var val1;
	var val2;
	var val3;

	with (window.document.f1) 
	{ 
		val1 = generation.value; 
		val2  = tree.value;
		val3 = subcat1.value;
		window.document.location = 'dd.php?generation=' + val1 + '&tree=' + val2 + '&subcat1=' + val3;
	}	
}
</script>


To find out more on window.document - http://www.java2s.co...dowdocument.htm

The form and PHP codes

<?php
// db connection
mysql_connect("host", "user", "pass") or die(mysql_error());
mysql_select_db("selectdb") or die(mysql_error());

if(isset($_GET['generation'])) // is generation set
	$_GenId = $_GET['generation'];

if(isset($_GET['tree'])) // is tree set
	$_Tree = $_GET['tree'];

if(isset($_GET['subcat1'])) // is subcat1 set
	$_SubCat1 = $_GET['subcat1'];
?>
<form id="f1" name="f1">
  <table width="100%" border="0" cellspacing="0" cellpadding="2">
	<tr>
	  <td width="9%">Generation</td>
	  <td width="91%">
	  <select name="generation" id="generation" onchange="reload_form();">
		<option value="">Select Generation</option>
<?php
	$rs_gen = mysql_query("SELECT * FROM Generation") or die(mysql_error());
	while($row = mysql_fetch_assoc($rs_gen))
	{
		$selected = "";
		if($row['Gen_ID'] == $_GenId)
			$selected = " selected";
			
		echo '<option value="'.$row['Gen_ID'].'"'.$selected.'>'.$row['Generation'].'</option>';
	}
?>
	  </select>
	  </td>
	</tr>
	<tr>
	  <td>Tree</td>
	  <td>
	  <select name="tree" id="tree" onchange="reload_form();">
	  <option value="">Select Name</option>
<?php
	$rs_tree = mysql_query("SELECT Name FROM Tree WHERE Gen_ID = '$_GenId'");
	
	while($row2 = mysql_fetch_assoc($rs_tree))
	{
		$selected = "";
		if($row2['Name'] == $_Tree)
			$selected = " selected";
			
		echo '<option value="'.$row2['Name'].'"'.$selected.'>'.$row2['Name'].'</option>';
	}
?>
	  </select>
	  </td>
	</tr>
	<tr>
	  <td></td>
	  <td></td>
	</tr>
  </table>
</form>
<?php
	// we're done with the connection
	mysql_close();
?>


Since we're getting javascript to do a little work for us it doesn't matter if your form has the method or action declared. We use a form to enable us to access the HTML elements easily through javascript. If you're planning to submit the form you would definitely need method="post" and action="" set.

To sum it up.. your completed dd.php page should look like this

<!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>Lee Family Reunion</title>

<script language="javascript" type="text/javascript">
function reload_form()
{
	var val1;
	var val2;
	var val3;

	with (window.document.f1) 
	{ 
		val1 = generation.value; 
		val2  = tree.value;
		val3 = subcat1.value;
	}	
	window.document.location = 'dd.php?generation=' + val1 + '&tree=' + val2 + '&subcat1=' + val3;
}
</script>
</head>

<body>
<?php
// db connection. Be sure to replace user, pass and selectdb with your own credentials.
mysql_connect("localhost", "user", "pass") or die(mysql_error());
mysql_select_db("selectdb") or die(mysql_error());

if(isset($_GET['generation']))
	$_GenId = $_GET['generation'];

if(isset($_GET['tree']))
	$_Tree = $_GET['tree'];

if(isset($_GET['subcat1']))
	$_SubCat1 = $_GET['subcat1'];
?>
<form id="f1" name="f1">
  <table width="100%" border="0" cellspacing="0" cellpadding="2">
	<tr>
	  <td width="9%">Generation</td>
	  <td width="91%">
	  <select name="generation" id="generation" onchange="reload_form();">
		<option value="">Select Generation</option>
<?php
	$rs_gen = mysql_query("SELECT * FROM Genx") or die(mysql_error());
	while($row = mysql_fetch_assoc($rs_gen))
	{
		$selected = "";
		if($row['Gen_ID'] == $_GenId)
			$selected = " selected";
			
		echo '<option value="'.$row['Gen_ID'].'"'.$selected.'>'.$row['Generation'].'</option>';
	}
?>
	  </select>
	  </td>
	</tr>
	<tr>
	  <td>Tree</td>
	  <td>
	  <select name="tree" id="tree" onchange="reload_form();">
	  <option value="">Select Name</option>
<?php
	$rs_tree = mysql_query("SELECT Name FROM Tree WHERE Gen_ID = '$_GenId'");
	
	while($row2 = mysql_fetch_assoc($rs_tree))
	{
		$selected = "";
		if($row2['Name'] == $_Tree)
			$selected = " selected";
			
		echo '<option value="'.$row2['Name'].'"'.$selected.'>'.$row2['Name'].'</option>';
	}
?>
	  </select>
	  </td>
	</tr>
	<tr>
	  <td></td>
	  <td></td>
	</tr>
  </table>
</form>
<?php
	// we're done with the connection
	mysql_close();
?>
</body>
</html>


If you were to copy the complete source and run it you would get a javascript error saying that subcat1.value is not defined. You would need to complete the form by creating the subcat1 select list and write code to populate subcat1 select list. Left this for you try out on your own. subcat1 select list was missing in your posted code.

Sorry for the super long reply. Hope that has helped you. Good luck

This post has been edited by saturnx: 05 June 2009 - 06:27 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1