Jump to content

help work third drop down menu


cherubrock74

Recommended Posts

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>

 

Link to comment
https://forums.phpfreaks.com/topic/157686-help-work-third-drop-down-menu/
Share on other sites

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.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.