AJAX

Dynamic drop down list not working

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2007

Posts: 30

Reputation: mortalex is an unknown quantity at this point

Solved Threads: 0

mortalex

Offline

Light Poster

Dynamic drop down list not working

Mar 7th, 2008

Hey,

I'm trying to create a dynamic drop down box where the first drop down box populates the second drop down, but it isn't working. I have two tables;
pricelist with fields,
-id
-groupname
-item
-price
groups with fields,
-id
-groupname

I've got the code and to me it looks as though it completely works, but i think its the fact that two of the fields have the same name, and it's causing problems.

index.php

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<script>
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{
				req = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch(e1){
					xmlhttp=false;
				}
			}
		}
 
		return xmlhttp;
	}
 
 
 
	function getItem(strURL) {		
 
		var req = getXMLHTTP();
 
		if (req) {
 
			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {						
						document.getElementById('itemdiv').innerHTML=req.responseText;						
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}
 
	}
</script>
 
<?
require_once('../sqlconnect/connect.php');
?>
 
</head>
 
<body>
 
<form method="post" action="" name="form1">
<table width="60%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="25">Group</td>
    <td  width="15"><select name="group" onChange="getItem('findcity.php?group='+this.value)">
	<option value="">Select Group</option>
 
<?
//make query
	$query ="SELECT * FROM groups";
	$result = mysql_query($query);
//run
 
$query = mysql_query('SELECT * FROM groups');
if(mysql_error())
{
print(mysql_error());
}
 
while($row = mysql_fetch_array($query)) 
{
echo '<option value="'.$row["groupname"].'  ">'.$row["groupname"];
} 
 
?>
 
        </select></td>
  </tr>
  <tr style="">
    <td>Item</td>
    <td ><div id="itemdiv"><select name="item">
	<option>Select Item</option>
        </select></div></td>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script>
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{
				req = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch(e1){
					xmlhttp=false;
				}
			}
		}
		 	
		return xmlhttp;
	}
	
	
	
	function getItem(strURL) {		
		
		var req = getXMLHTTP();
		
		if (req) {
			
			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {						
						document.getElementById('itemdiv').innerHTML=req.responseText;						
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}
				
	}
</script>

<?
require_once('../sqlconnect/connect.php');
?>

</head>

<body>

<form method="post" action="" name="form1">
<table width="60%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="25">Group</td>
    <td  width="15"><select name="group" onChange="getItem('findcity.php?group='+this.value)">
	<option value="">Select Group</option>
	
<?
//make query
	$query ="SELECT * FROM groups";
	$result = mysql_query($query);
//run

$query = mysql_query('SELECT * FROM groups');
if(mysql_error())
{
print(mysql_error());
}

while($row = mysql_fetch_array($query)) 
{
echo '<option value="'.$row["groupname"].'  ">'.$row["groupname"];
} 

?>

        </select></td>
  </tr>
  <tr style="">
    <td>Item</td>
    <td ><div id="itemdiv"><select name="item">
	<option>Select Item</option>
        </select></div></td>

findcity.php

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<select name="item">
<option value="">Select Item</option>
 
<? 
 
//if so, connect to database
	require_once('../sqlconnect/connect.php');
 
$query="SELECT item FROM pricelist WHERE groupname=$groupname";
$result=mysql_query($query);
 
$query = mysql_query('SELECT * FROM pricelist');
if(mysql_error())
{
print(mysql_error());
}
 
while($row = mysql_fetch_array($query)) 
{
echo '<option value="'.$row["item"].'  ">'.$row["item"];
} 
 
?>
 
</select>
<select name="item">
<option value="">Select Item</option>

<? 

//if so, connect to database
	require_once('../sqlconnect/connect.php');

$query="SELECT item FROM pricelist WHERE groupname=$groupname";
$result=mysql_query($query);

$query = mysql_query('SELECT * FROM pricelist');
if(mysql_error())
{
print(mysql_error());
}

while($row = mysql_fetch_array($query)) 
{
echo '<option value="'.$row["item"].'  ">'.$row["item"];
} 

?>

</select>

When i select an option in the first drop down box, it populates the second with all the values in the table, not just the selected ones.

Cheers

•

Join Date: Apr 2005

Posts: 1,402

Reputation: ShawnCplus is a glorious beacon of light

Solved Threads: 225

ShawnCplus ShawnCplus is offline

Offline

Code Monkey

Re: Dynamic drop down list not working

Mar 7th, 2008

Well for both files you aren't ending your option tag when you generate them, it may not be what's causing the problem but it's incorrect nonetheless

GCS d- s+ a-->? C++(++++) UL+++ P+>+++ L+++ E--- W+++
N+ o K w++(---) O? !M- V PS+>++ PE+ Y+ PGP !t- 5? X- R tv+
b+>++ DI+ D G++>+++ e+ h+>++ r y+
PMs asking for help will not be answered, post on the forums. That's what they're there for.

•

Join Date: Oct 2007

Posts: 30

Reputation: mortalex is an unknown quantity at this point

Solved Threads: 0

mortalex

Offline

Light Poster

Re: Dynamic drop down list not working

Mar 7th, 2008

Yea i know, i purposely left them off, to save space.
What other problems have you seen with my code?

•

Join Date: Apr 2005

Posts: 1,402

Reputation: ShawnCplus is a glorious beacon of light

Solved Threads: 225

ShawnCplus ShawnCplus is offline

Offline

Code Monkey

Re: Dynamic drop down list not working

Mar 7th, 2008

Sorry, I actually laughed at that. Leaving off the end tag makes the HTML invalid, and can cause cascading errors.

•

Join Date: Oct 2007

Posts: 30

Reputation: mortalex is an unknown quantity at this point

Solved Threads: 0

mortalex

Offline

Light Poster

Re: Dynamic drop down list not working

Mar 9th, 2008

*bump*

•

Join Date: Aug 2009

Posts: 2

Reputation: leadinnasirawan is an unknown quantity at this point

Solved Threads: 0

leadinnasirawan leadinnasirawan is offline

Offline

Newbie Poster

Re: Dynamic drop down list not working

Aug 14th, 2009

@mortalex

Oh Shit!! I got the same problem using ajax... I believe that your coding is perfectly correct. This shit works only the first time page loads

@mortalex This same coding will work very correctly if you use it not in table (in open page or outside of table)

Any other suggestion or solution..?