'Select Box' Selection Function

Status
Not open for further replies.

ziycon

New Member
Ok, i have two select boxes called make and model, i want the user to select an option from the make box and depending on what the user selects the model box will be filled with results from an SQL query, i think its to do with Javascript but i m not too up the JS myself, can anyone help?
 

ziycon

New Member
Thats exactly it, only problem is, the way its done here means i have to have every record in js on the page, theres so many makes and models it would be efficent to have it this way, is there any other way to do it(keep in mind all the makes and models are in a DB)?

Code:
var regionState = new DynamicOptionList();
regionState.forValue("west").addOptions("California","Washington","Oregon");
regionState.forValue("midwest").addOptions("Illinois","Iowa","Missouri");
regionState.forValue("east").addOptions("New York","Maine","Pennsylvania");
 

TheMenace

New Member
The only way to load the content for the new dropdown on demand is AJAX. It's pretty easy if you already know PHP/MySQL and a little JavaScript.
 

ziycon

New Member
The only way to load the content for the new dropdown on demand is AJAX. It's pretty easy if you already know PHP/MySQL and a little JavaScript.
PHP & MySQL im fine with but i never really learned JavaScript, i understand the basics but the rest is beyond me!
 

louie

New Member
There is simle sample:

PHP:
var ewd_domain = 'http://www.eire-webdesign.ie/'; //set domain 
var ewd_loading_img = ewd_domain + 'images/loading.gif';//set image path 
var ewd_loading_msg = '<strong>Loading Data…</strong>';//set loading message 
var xmlhttp_obj = false; 
 
//create the XMLHttpRequest 
function ewd_xmlhttp(){ 
if (window.XMLHttpRequest){ // if Mozilla, Safari etc 
xmlhttp_obj = new XMLHttpRequest(); 
}else if (window.ActiveXObject){ // if IE 
try{ 
xmlhttp_obj = new ActiveXObject("Msxml2.XMLHTTP"); 
}catch (e){ 
try{ 
xmlhttp_obj = new ActiveXObject("Microsoft.XMLHTTP"); 
}catch (e){ 
} 
} 
}else{ 
xmlhttp_obj = false; 
} 
return xmlhttp_obj; 
} 
//get content via GET 
function ewd_getcontent(url, containerid){ 
var xmlhttp_obj = ewd_xmlhttp(); 
document.getElementById(containerid).innerHTML = '<img src="http://www.eire-webdesign.ie/blog/wp-admin/'+ewd_loading_img+'" />' + ewd_loading_msg; 
xmlhttp_obj.onreadystatechange=function(){ 
ewd_loadpage(xmlhttp_obj, '', containerid); 
} 
xmlhttp_obj.open('GET', url, true); 
xmlhttp_obj.send(null); 
} 
function ewd_loadpage(xmlhttp_obj, content, containerid){ 
if ( xmlhttp_obj.readyState == 4 && xmlhttp_obj.status == 200 ){ 
document.getElementById(containerid).innerHTML = xmlhttp_obj.responseText; 
} 
} 
 
//this is the javascript
//replace domain name with yours

now the page to make the request

PHP:
<form name='' id='' action='' method='get'>
<select name='sel1' id='sel1' onchange="ewd_getcontent('page_requested.php?sel1='+this.value, 'span1');">
<option value='1'>1</option>
<option value='2'>2</option>
</select>
<span id='span1'>
<select name='sel2' id='sel2'>
</select>
</span>
</form>

and on the requested page you have your query to the database:

PHP:
$qs = $_GET['sel1'] != "" ? $_GET['sel1'] : "";
 
if($qs != ""){
//query db and get records
 
.................
 
//if we have records create select menu
if($count_records > 0){
  echo "<select name='sel2' id='sel2'>";
  //do the while to create the options
  while(....){
    echo "<option value='$value'>$value</option>";
    //more options
  }//end while
  echo "</select>";//close select
}//end if
 
}//end if $qs != ""

might get you started.
 

ziycon

New Member
Just in case you don't get the hang of it, I put up some step-by-step instructions and a sample page:

Dependent Select Box using Ajax | Eire Web Design
So instead of having loads of if statements i could just do this??
PHP:
<?php
$txt = "";
$qs = $_GET['sel1'] != "" ? preg_replace("#[^0-9]#","",$_GET['sel1']) : "1";//I use preg_replace to sanitze the get request
//which in this case must be numbers
//this is manually created but it can be easily populated from a database
if($qs != "")
{
 $sql = "SELECT id,make, model_id FROM item_list WHERE model_id = '".$qs."' ORDER BY make ASC";
 $data = mysql_query($sql);
 while ($row = mysql_fetch_assoc($data))
 {
 $txt.='<option value="'.$row['id'].'">'.$row['make'].'</option>';
 }
 echo $txt;
}
?>
 

louie

New Member
yes but you forgot to create the select menu and jumped to creating the options.

Revised code:
PHP:
<?php
$txt = "";
$qs = $_GET['sel1'] != "" ? preg_replace("#[^0-9]#","",$_GET['sel1']) : "1";//I use preg_replace to sanitze the get request
//which in this case must be numbers
//this is manually created but it can be easily populated from a database
if($qs != "")
{
 $sql = "SELECT id,make, model_id FROM item_list WHERE model_id = '".$qs."' ORDER BY make ASC";
 $data = mysql_query($sql);
$txt .="<select name='name' id='name'>";//open select
$txt .="<option value=''>Select...</option>";//blank option value
 while ($row = mysql_fetch_assoc($data))
 {
 $txt.='<option value="'.$row['id'].'">'.$row['make'].'</option>';
 }
$txt .= "</select>";//close select 
 echo $txt;
}
?>
 

ziycon

New Member
I got it your code working louie, i think!? Are you meant to pick something from the first box and the click the 'go' button to fill the second box as thats whats happening for me!?

I need it so once you pick an option i the first select box that its automatically changes the second box!?
 

louie

New Member
have you a link for me to see?

Once the first select menu changes the second select should change as well. the "onchange" triggers the javascript function.

The submit button is only used just in case javascript is turned off.
 

louie

New Member
as expected you have errors in your javascript after copy and paste from my website.
Do a quick find and replace ‘ with '
Let me know.

Also this line
PHP:
 if ( xmlhttp_obj.readyState == 4 &amp;&amp; xmlhttp_obj.status == 200 ){
 
//should be
 

 if ( xmlhttp_obj.readyState == 4 && xmlhttp_obj.status == 200 ){
 
Status
Not open for further replies.
Top