Auto populate select boxes

[dan_ord]

Hi everyone,

I'm having difficuties in getting 2 select boxes to automatically update, when a specific option is chosen from the 1st select box, the 2nd box should update accordingly.

I should also point out that i am populating my select boxes from a database.

My database structure is as follows:

Manufacturers
man_id
manufacturer

Models
model_id
man_id
model

For example:

I choose Audi from the 1st select box

I want the second select box to display a list of models for that manufacturer without having to refresh the page.

Below is my code for the select boxes. I'm aware i'll need to use AJAX, i just need a hand getting it set up.

Any help would be greatly appreciated

<select name="man_id" class="input" id="man_id">
          <option value="Please Select">Please Select</option>
      <?php
      		  // Open Connection to DB
			  require_once ('../include/config.inc_admin.php');
			  require_once (MYSQL);
			  
			  $q = "SELECT man_id, manufacturer FROM manufacturers";
			  $r = mysqli_query ($dbc, $q) or trigger_error("Query: $q\n<br />MySQL Error: " . mysqli_error($dbc));
			  
			  while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {
			  	
				echo "<option value=" . $row['man_id'] . ">" . $row['manufacturer'] . "</option>"; 
			  }
      ?>
        </select></label></td>
    </tr>
  <tr>
    <td><label>Model:<br />
        <select name="model_id" class="input" id="model_id">
          <option value="Please Select">Please Select</option>
          <?php
      		  // Open Connection to DB
			  require_once ('../include/config.inc_admin.php');
			  require_once (MYSQL);
			  
			  
			  echo $q = "SELECT model_id, model FROM models";
			  $r = mysqli_query ($dbc, $q) or trigger_error("Query: $q\n<br />MySQL Error: " . mysqli_error($dbc));
			  
			  while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {
			  	
			  	echo "<option value=" . $row['model_id'] . ">" . $row['model'] . "</option>"; 
			  }
      ?>
        </select>

[Fbody]

<select name="man_id" class="input" id="man_id">

You don't have any triggers. You need to use events to trigger JavaScript to initiate an AJAX routine.

Change it to something like:

<select name="man_id" class="input" id="man_id" onchange="JSFunctionName(this.value)">

Where JSFunctionName() is the name of a JavaScript function intended to respond to the event. The "this.value" is a statement used to access the index of the selected item. Your functions would translate the index into something meaningful for the database.

Click here for more info on events.
This will help with AJAX.

[dan_ord]

Hi Fbody,

Cheers for the reply.

Had a look through the links you mentioned and i've managed to put something together thats works!

Quite easy actually, just didn't know what i was looking for.

Thanks alot for you help.

If anyone would like to see how i got it working, just say so and i'll post up my code.

Dan.

[putusundika]

hi Dan, please post the final code

[dan_ord]

Hi,

Code i used is listed below, however you should check out another post i started, which greatly improves the size and usability of the code im going to post. I haven't had time to test the new code out myself, but it looks like a winner.

http://www.daniweb.com/forums/post1142017.html

HTML part:

<select name="man_id" class="input" id="man_id" onchange="listUpdate(this.value)">
          <option value="Please Select">Please Select</option>
      <?php
      		  // Open Connection to DB
			  require_once ('../include/config.inc_admin.php');
			  require_once (MYSQL);
			  
			  $q = "SELECT man_id, manufacturer FROM manufacturers";
			  $r = mysqli_query ($dbc, $q) or trigger_error("Query: $q\n<br />MySQL Error: " . mysqli_error($dbc));
			  
			  while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {
			  	
			  	$man_id = $row['man_id'];
				echo "<option value=" . $row['man_id'] . ">" . $row['manufacturer'] . "</option>"; 
			  }
      ?>
        </select>

<div id="model_id"></div>

JS Code:

var xmlhttp;

function listUpdate(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="update_engine.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("model_id").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

PHP Code to populate the other select box (update_engine.php):

<select name="model_id" class="input" id="model_id">
          <option value="Please Select">Please Select</option>
<?php
      		  $q = $_GET['q']; // Manufacturer ID
			  
			  // Open Connection to DB
			  require_once ('../include/config.inc_admin.php');
			  require_once (MYSQL);
			  
			  $q = "SELECT model_id, model FROM models WHERE man_id = '$q'";
			  $r = mysqli_query ($dbc, $q) or trigger_error("Query: $q\n<br />MySQL Error: " . mysqli_error($dbc));
			  
			  while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {
			  	
				echo "<option value=" . $row['model_id'] . ">" . $row['model'] . "</option>"; 
			  }
?>
</select>