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

Jen765Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jen765Author Commented:
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

0
Michel PlungjanIT ExpertCommented:
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

0
Michel PlungjanIT ExpertCommented:
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
0
CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

Julian HansenCommented:
Why don't you consider using a library like Jquery that will do all of the AJAX for you very simply?
0
Michel PlungjanIT ExpertCommented:
probably no real need but it does take care of a lot of processing
the line that needs to be fixed is
 document.getElementById('year').innerHTML=req.responseText;//put the results of
It only shoves options into the year drop down and you want to change the model from make and year from model.
 What you want is to return the items in for example JSON format and then change the options one by one
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Jen765Author Commented:
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!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.