asked on

AJAX drop down menu Updating from SQL and PHP

I am very new at AJAX so I wrote my code how it made sense to me however it is not doing what I want. I have 3 drop down menus from a form that asks make, model, and year. The first two drop downs work. You click on make and it pulls up the models for that make in the next pull down however when you pick a model it doesn't pull the next list up of years from the makes and models.

I keep trying to change little things. Anyone have any suggestions?

Jen

//This is my main php file

<? require_once('includes/connection.php'); ?>
<html>
<head>
<script>

// this is the code contained by the ajaxscript.js file, so you dont need to call it any more

	function CreateXmlHttpObject() { //fuction to return the xml http object
		var xmlhttp=false;	
		try{
			xmlhttp=new XMLHttpRequest();//creates a new ajax object
		}
		catch(e)	{		
			try{			
				xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");//this is for IE browser
			}
			catch(e){
				try{
				req = new ActiveXObject("Msxml2.XMLHTTP");//this is for IE browser
				}
				catch(e1){
					alert("Your browser does not support AJAX!");
      				return false;
	  //error creating object
				}
			}
		}
		 	
		return xmlhttp;
	}
	
function CategoryGrab(strURL)
    {         
     var req = CreateXmlHttpObject(); // fuction to get xmlhttp object
     if (req)
     {
      req.onreadystatechange = function()
     {
      if (req.readyState == 4) { //data is retrieved from server
       if (req.status == 200) { // which represents ok status                    
         document.getElementById('model').innerHTML=req.responseText;//put the results of the requests in or element.
		// As you can see in the body section, there is a DIV container (wich contains the second droplist),
		// the results generated by this object will be directed to the DIV so the SELECT will be "recreated"
      }
      else
      { 
         alert("There was a problem while using XMLHTTP:\n");
      }
      }            
      }        
    // here you call the ajaxcall.php page, where the new droplist will be rendered
    req.open("GET", strURL, true); //open url using get method
    req.send(null);//send the results
     }
    }
	
function CategoryGraby(strURL)
    {         
     var req = CreateXmlHttpObject(); // fuction to get xmlhttp object
     if (req)
     {
      req.onreadystatechange = function()
     {
      if (req.readyState == 4) { //data is retrieved from server
       if (req.status == 200) { // which represents ok status                    
         document.getElementById('year').innerHTML=req.responseText;//put the results of the requests in or element.
		// As you can see in the body section, there is a DIV container (wich contains the third droplist),
		// the results generated by this object will be directed to the DIV so the SELECT will be "recreated"
      }
      else
      { 
         alert("There was a problem while using XMLHTTP:\n");
      }
      }            
      }        
    // here you call the ajaxcall.php page, where the new droplist will be rendered
    req.open("GET", strURL, true); //open url using get method
    req.send(null);//send the results
     }
    }

</script>

</head>
<body>
<?

//ONLY THE BODY PART CHANGES!

echo '	<table align="center">';
echo '		<tr>';
echo '			<td>';	
echo '				<form method="post" action="check.php">MAKE:';
echo '					<select name="MAKE" onChange="CategoryGrab('."'".'ajaxcall.php?MAKE='."'".'+this.value);" 						style="width:230px;margin-top:-10px;">';
							$result1 = mysql_query("SELECT DISTINCT make FROM pages ORDER BY make ASC");
							$nr=0;
echo '							<option value="">Select a Make</option>';													
							while($row = mysql_fetch_array($result1))
							{
								$nr++;
echo "							<option value=".'"'.$row['make'].'" >'.$row['make']."</option>";
							}	
echo '					</select>'."\n";


echo '					<div id="model">MODEL:';
echo '						<select name="MODEL" onChange="CategoryGraby('."'".'ajaxmodel.php?MODEL='."'".'+this.value);" style="width:230px;margin-top:10px;">';
								$result2 = mysql_query("SELECT DISTINCT model FROM cars ORDER BY make ASC");
								$na=0;
echo '							<option value="">Select a Model</option>';
								while($row = mysql_fetch_array($result2))
								{
									$na++;
echo "								<option value=".$row['model'].">".$row['model']."</option>";
								}
echo '					</select>'."\n";
echo '						</div>';

echo '					<div id="year">YEAR:';
echo '						<select name="YEAR" style="width:230px;margin-top:10px;" >';
								$result3 = mysql_query("SELECT DISTINCT year FROM cars WHERE YEAR ='1999'");
								while($row = mysql_fetch_array($result3))
								{
									
echo "								<option value=".$row['year'].">".$row['year']."</option>";
								}
echo '							</select>';
echo '						</div>';

echo "					<input type=submit value=Submit>";
echo '				</form>';
echo '			</td>';
echo '		</tr>';
echo '	</table>';

require("includes/footer.php");
?>
</body>
</html>



//This is my ajaxcall.php
<?
require_once('includes/connection.php'); 

// ONLY CHANGED AFTER THIS POINT

$MAKE=$_REQUEST['MAKE'];

echo '	MODEL:<select name="MODEL" style="width:230px;margin-top:10px;" >';
				$result1 = mysql_query("SELECT DISTINCT model FROM pages WHERE make='".$MAKE."'");
				while($row = mysql_fetch_array($result1))
					{
echo "					<option value=".$row['model'].">".$row['model']."</option>";
					}
echo '		   </select>';

require("includes/footer.php");
	
?>



//This is my ajaxmodel.php file
<?
require_once('includes/connection.php'); 

$MAKE=$_REQUEST['MAKE'];
$MODEL=$_REQUEST['MODEL'];

echo '	<p>YEAR:<select name="YEAR" width="100" >';
				$result2 = mysql_query("SELECT DISTINCT year FROM pages WHERE make=$Make AND model=$Model");
				while($row = mysql_fetch_array($result2))
					{
echo "					<option value=".$row['year'].">".$row['year']."</option>";
					}
echo '		   </select>';


require("includes/footer.php");
	
?>



//This is my ajaxscript.js

function CreateXmlHttpObject() { //fuction to return the xml http object
		var xmlhttp=false;	
		try{
			xmlhttp=new XMLHttpRequest();//creates a new ajax object
		}
		catch(e)	{		
			try{			
				xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");//this is for IE browser
			}
			catch(e){
				try{
				req = new ActiveXObject("Msxml2.XMLHTTP");//this is for IE browser
				}
				catch(e1){
					xmlhttp=false;//error creating object
				}
			}
		}
		 	
		return xmlhttp;
	}
	

  function CategoryGrab(strURL)
    {         
     var req = CreateXmlHttpObject(); // fuction to get xmlhttp object
     if (req)
     {
      req.onreadystatechange = function()
     {
      if (req.readyState == 4) { //data is retrieved from server
       if (req.status == 200) { // which reprents ok status                    
         document.getElementById('details').innerHTML=req.responseText;//put the results of the requests in the element
      }
      else
      { 
         alert("There was a problem while using XMLHTTP:\n");
      }
      }            
      }        
    req.open("GET", strURL, true); //open url using get method
    req.send(null);//send the results
     }
    }

Open in new window

Jen765

ASKER

Okay I think I have narrowed it down to the following line. I know that I need to tell the URL to be

"findModel.php?MAKE=(whatever the value is)?YEAR=$YEAR"

However I have tried many different ways and I don't seem to be hitting the right combination.

echo 'MODEL:<select name="MODEL"  onChange="CategoryGraby('."'".'findModel.php?MAKE='."'".'+this.value);" style="width:230px;margin-top:10px;" >';

Open in new window

Michel Plungjan

Firstly let's make this readable

<table align="center">';
	<tr>
		<td>	
	    <form method="post" action="check.php">MAKE:
        <select name="MAKE" onChange="if (this.selectedIndex >0) CategoryGrab('findModel.php?MAKE='+this.options[this.selectedIndex].value);" style="width:230px;margin-top:-10px;">
            <option value="">Select a Make</option>                          
<?PHP        
$result1 = mysql_query("SELECT DISTINCT make FROM pages ORDER BY make ASC");
$nr=0;
while($row = mysql_fetch_array($result1))
{
  $nr++;
  ?>
            <option value="<?PHP echo $row['make']; ?>" ><?PHP echo $row['make']; ?></option>
<?PHP
}  
  ?>
        </select>
        <div id="model">MODEL:
          <select name="MODEL" onChange="if (this.selectedIndex >0) CategoryGraby('ajaxmodel.php?MODEL='+this.options[this.selectedIndex].value);" style="width:230px;margin-top:10px;">
            <option value="">Select a Model</option>
<?PHP
          
  $result2 = mysql_query("SELECT DISTINCT model FROM cars ORDER BY make ASC");
  $na=0;
  while($row = mysql_fetch_array($result2))
  {
    $na++;
  ?>
              <option value="<?PHP echo $row['model']; ?>"><?PHP echo $row['model']; ?></option>
<?PHP
}  
  ?>
        </select>
          </div>

        <div id="year">YEAR:';
          <select name="YEAR" style="width:230px;margin-top:10px;" >
<?PHP
          
  $result3 = mysql_query("SELECT DISTINCT year FROM cars WHERE YEAR ='1999'");
  while($row = mysql_fetch_array($result3))
  {
  ?>
    
              <option value="<?PHP echo $row['year']; ?>"><?PHP echo $row['year']; ?></option>
<?PHP
}  
  ?>
            </select>
          </div>

        <input type=submit value=Submit>
      </form>
    </td>
  </tr>
</table>

Open in new window

Michel Plungjan

Secondly you do NOT want to use innerHTML to fill a select.

Let me get back to you on this in an hour or so

Julian Hansen

Why don't you consider using a library like Jquery that will do all of the AJAX for you very simply?

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jen765

ASKER

mplungjan you made a good point. I kept trying to grab both variables to find my value. Once I had one value I only needed the one variable to find the next.

Once I found the make I could grab the model
Once I found the model I could grab the year

Thank you for leading me in the right direction!