• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 472
  • Last Modified:

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

0
Jen765
Asked:
Jen765
  • 3
  • 2
1 Solution
 
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now