im using ajax to load the values into combo box two after the user chose a category from combo box 1.
but the contents are not loading in the combo box one.
i do know how to do it in php but using html form cant make it work.
the value are retrieved from database
example:user select Ford from combo box one ,once he clicks the button Mustange,Mondeo will be loaded in combo box 2 .

i do know how to load contents from sql into combo box pure php
here is the prove

<? include("connection.php") ?>
<?
$query_dispMake="SELECT make FROM car ORDER BY make";
$result_dispMake=mysql_query($query_dispMake);
 
   
echo "<select name=\"select[]\">\n"; 

while($query_data = mysql_fetch_array($result_dispMake)){


  echo"<option>{$query_data['make']}</option>";  

 }
 $query_dispMake2="SELECT DISTINCT model FROM car ORDER BY model";
$result_dispMake2=mysql_query($query_dispMake2);
  echo "<select name=\"second\">\n"; 
 while($query_data = mysql_fetch_array($result_dispMake2)){

  echo"<option>{$query_data['model']}</option>";   

 }
?>

<index.html which is not working>

<html>
<body>

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	var search_category_id = document.getElementById('search_category_id').value;
	
	
	ajaxRequest.open("GET", get.php", true);
	ajaxRequest.send(null); 
}

//-->
</script>
<?php
		include('connection.php')?>
		
<select name="search_category"  id="search_category_id">
		<option value="" selected="selected"></option>
<?php
$query = "select makeName from combo";
		$results = mysql_query($query);
		
		while ($rows = mysql_fetch_assoc(@$results))
		{?>
			 echo"<option>{$rows['makeName']}</option>";  
		<?php
		}?>
<input type='button' onclick='ajaxFunction()' value='Query MySQL' />

<select name="search_category"  id="search_category_id">
		<option value="" selected="selected">    </option>
		
<option value=><div id='ajaxDiv'></div>
</option>
   
		
		</select>



</body>
</html>

get.php

<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "0000";
$dbname = "car";
	//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
	//Select Database
mysql_select_db($dbname) or die(mysql_error());
	// Retrieve data from Query String
	

$search_category_id = $_GET['search_category_id'];



	//build query
$query = "SELECT model FROM car WHERE makeKey= ".$id;

	//Execute query
$qry_result = mysql_query($query) or die(mysql_error());

<select name="sub_category"  id="sub_category_id">
	
	<option value="" selected="selected"></option>
	<?php
	while ($rows = mysql_fetch_assoc(@$qry_result))
	{?>
		<option value="<?php echo $rows['m'];?>  ID=<?php echo $rows['id'];?>"><?php echo $rows['category'];?></option>
		
	<?php
	}?>
	</select>	

?>

In raw JavaScript, you need to remove all option elements inside your target combo box, and then repopulate options by creating option elements & append them to the target combo box.

Member Avatar for Pnorq

This is a bit re-engineered....and could use a lot of refactoring but it serves as a working example. It is NOT production code! :icon_eek:

Suggestion: look into using JQuery.

The database is:
Table: combo
Fields: makeKey (tinyint) and makeName (varchar)
Table: car
Fields: makeKey (tinyint) and model (varchar)

index.php

<?php
session_start();
include("db.php");

	// Retrieve data from Query String
$query_dispMake="SELECT DISTINCT makeName FROM combo ORDER BY makeName";
$result_dispMake = mysql_query($query_dispMake);
?>


<html>
<head>
<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction( make ){

	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('models');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
//	var search_category_id = document.getElementById('search_category_id').value;
	
	ajaxRequest.open("GET", "get.php?make="+make, true);
	ajaxRequest.send(null); 
}

//-->
</script>
</head>		
<body>
<form name="select_make_form">
<select name="make"  id="makes">

<?php
while($query_data = mysql_fetch_array($result_dispMake)){
  $makeName = $query_data['makeName'];
  echo"<option value=\"$makeName\">$makeName</option>";   
}
?>

</select>

<input type='button' onclick='ajaxFunction(document.select_make_form.makes.options[document.select_make_form.makes.selectedIndex].value);' value='Query MySQL' />
</form>

<select name="models"  id="models"></select>

</body>
</html>

get.php

<?php
include("db.php");

$make = $_GET['make'];

//build query
$query = "SELECT car.model FROM car, combo WHERE car.makeKey = combo.makeKey AND combo.makeName = '".$make."'";

//Execute query
$qry_result = mysql_query($query, $connection) or die( mysql_error() );

while ( $row = mysql_fetch_assoc( $qry_result ) ) {
   echo "<option value=\"".$row['model']."\">".$row['model']."</option>";
}
?>

db.php

<?php
//Local

$dbhost = "localhost";
$dbuser = "root";
$dbpass = "0000";
$dbname = "car";
	//Connect to MySQL Server
$connection = mysql_connect($dbhost, $dbuser, $dbpass);
$_SESSION['db_conn'] = $connection;
	//Select Database
$db = mysql_select_db($dbname) or die(mysql_error());
?>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.