'Select Box' Selection Function

Discussion in 'Coding Help' started by ziycon, Nov 12, 2007.

  1. ziycon

    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?
     
  2. paul

    paul Ninja

  3. ziycon

    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");
     
  4. paul

    paul Ninja

    You could do something nice with AJAX.
     
  5. ziycon

    ziycon New Member

    Haven't got a clue where to start with AJAX, you know any nice tutorials?
     
  6. louie

    louie New Member

  7. ziycon

    ziycon New Member

    ah im so lost, cant get my head round it, think i need a break!:eek:
     
  8. TheMenace

    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.
     
  9. ziycon

    ziycon New Member

    PHP & MySQL im fine with but i never really learned JavaScript, i understand the basics but the rest is beyond me!
     
  10. TheMenace

    TheMenace New Member

    You don't need to know much to be honest. Just how the HTTPRequest object works. Have a look at this tutorial.
     
  11. louie

    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(urlcontainerid){ 
    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'urltrue); 
    xmlhttp_obj.send(null); 

    function 
    ewd_loadpage(xmlhttp_objcontentcontainerid){ 
    if ( 
    xmlhttp_obj.readyState == && 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.
     
  12. ziycon

    ziycon New Member

    Thanks lads, i'll mill over this stuff and see how i get on!
     
  13. louie

    louie New Member

    if you need help just ask
     
  14. louie

    louie New Member

  15. ziycon

    ziycon New Member

    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;
    }
    ?>
     
  16. louie

    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;
    }
    ?>
     
  17. ziycon

    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!?
     
  18. louie

    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.
     
  19. ziycon

    ziycon New Member

  20. louie

    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 == &amp;&ampxmlhttp_obj.status == 200 ){
     
    //should be
     

     
    if ( xmlhttp_obj.readyState == && xmlhttp_obj.status == 200 ){
     
     

Share This Page