Member Avatar for razerLachesis

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>	

?>
  • 3 Contributors
  • 2 Replies
  • 572 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Pnorq
Member Avatar for Taywin

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.