help work third drop down menu

cherubrock74 · May 11, 2009

Can someone please help me work this out?

I have 3 drop down - Ajax based - menus that are populated using mysql data...

I managed to work 2 out of the three menus...

I need help to work the third menu that is not displaying the data correctly based on the selection from the second.

My database has 3 fields that are category, subcategory and subcategory2

so far I successfully populated the first two drop down menus with data from category and subcategory. The third menu after the selection from the first displays the same data as the second.

Here is my code:


<html>
<body>

<script type="text/javascript">
function AjaxFunction(cat_id)
{
var httpxml;
try
  {
  // Firefox, Opera 8.0+, Safari
  httpxml=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
	  try
   			 		{
   				 httpxml=new ActiveXObject("Msxml2.XMLHTTP");
    				}
  			catch (e)
    				{
    			try
      		{
      		httpxml=new ActiveXObject("Microsoft.XMLHTTP");
     		 }
    		catch (e)
      		{
      		alert("Your browser does not support AJAX!");
      		return false;
      		}
    		}
  }
function stateck() 
    {
    if(httpxml.readyState==4)
      {

var myarray=eval(httpxml.responseText);
// Before adding new we must remove previously loaded elements
for(j=document.testform.subcat.options.length-1;j>=0;j--)
{
document.testform.subcat.remove(j);
}


for (i=0;i<myarray.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myarray[i];
optn.value = myarray[i];
document.testform.subcat.options.add(optn);

} 

for (i=0;i<myarray.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myarray[i];
optn.value = myarray[i];
document.testform.subcat2.options.add(optn);

} 
      }
    }
var url="dd.php";
url=url+"?cat_id="+cat_id;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateck;
httpxml.open("GET",url,true);
httpxml.send(null);
  }
</script>

<form name="testform" method='POST' action="mainck.php">
Select first one <select name=cat onchange="AjaxFunction(this.value);">
<option value=''>Select One</option>
<?
require "config.php";// connection to database 
$q=mysql_query("select * from category ");
while($n=mysql_fetch_array($q)){
echo "<option value=$n[cat_id]>$n[category]</option>";
}

?>
</select>
<select name=subcat>
</select><select name=subcat2>
</select><br>
<input type=submit value=submit>
</form>
</body>
</html>

gregor171 · May 16, 2009

This is a bit unorganized code. To get an idea:

you are sending value this.value to ajax function where you indicate it as cat_id, but it's not an ID.

For a simple solution send just call it with parameter this, where in AjaxFunction you'll be able to read it's value. Rename parameters so they mean what they are.

function AjaxFunction(sender)
{
var sender_value = sender.value;

// or just use sender.value in your code

Her comes the magic. This way you'll be able to add options simply by:

sender.add(optn);

Never do this in any language:

for (i=0;i<myarray.length;i++)

it's slow and....

var array_length = myarray.length;
for (i=0;i<array_length;i++)

This is a bit JavaScript with objects.

Sign In

help work third drop down menu

Recommended Posts

cherubrock74

Link to comment

Share on other sites

gregor171

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information