Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts

    a selection in a list to populate another list on the same form

    Hi there every one,
    Please i have a form with 4 dropdown list.
    the first is for a canditate, 2nd is for party, 3rd is for state and 4th is for the local areas in the state; each state has its unique set of areas.
    I want if the user selects a state, the dropdown list for the local area to be populated automatically.
    But since they are on the same form i am not sure how. I have all the states in a table in a databse, the local areas too, but using php means one has to submit the form first before getting the area list populated. I was hoping there is a way to get the lists available and searchable by JS on the clientside


    Please help, Any one.

  • #2
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi. You can do this with AJAX.
    Here's an example: http://bonrouge.com/demos/cadenaselect.php

    cadenaselect.php
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Language" content="es">
    <title>cadena select</title>  
    </head> 
    <style type="text/css">
    
    * {
    margin:0;
    padding:0;
    }
    body {
    background-color:#fff;
    }
    
    </style>
    
    <script type="text/javascript">
    var request = false;
    /*@cc_on @*/
    /*@if (@_jscript_version >= 5)
    try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
    request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e2) {
    request = false;
    }
    }
    @end @*/
    if (!request && typeof XMLHttpRequest != 'undefined') {
    request = new XMLHttpRequest();
    }
    
    function ajaxSwitch(pais) {
    var url = "cadenaselect2.php?pais=" + escape(pais);
    request.open("GET", url, true);
    request.onreadystatechange = go;
    request.send(null);
    }
    
    
    function go() {
    if (request.readyState == 4) {
    if (request.status == 200) {
    var response = request.responseText;
    var lista=document.getElementById("ciudad");
    var ciudades=response.split('|');
    for (i=1; i<ciudades.length; i++) {
    	var x=document.createElement('option');
    	var y=document.createTextNode(ciudades[i]);
    	x.appendChild(y);
    	lista.appendChild(x);
    	}
       }
      }
    }
    
    function init() {
    var pais=document.getElementById('pais');
    pais.onchange=function() {
    	if(this.value!="") {
    		var lista=document.getElementById("ciudad");
    		while (lista.childNodes[0]) {lista.removeChild(lista.childNodes[0])}
    		ajaxSwitch(this.value);
    		}
    	}
    	ajaxSwitch(pais.value);
    }
    window.onload=init;
    </script>
    <body> 
    <form method="get" action="#">
    <label>país: <select id="pais" name="pais">
    <option value="Inglaterra">Inglaterra</option>
    <option value="Estados Unidos">Estados Unidos</option>
    <option value="Australia">Australia</option>
    </select></label>
    <label>ciudad: <select id="ciudad" name="ciudad"></select></label>
    	<input type="submit" />
    </form>
    
    </body> 
    </html>
    cadenaselect2.php
    PHP Code:
    <?php
    function hazLo($pais) {
    switch (
    $pais) {
    case 
    "Inglaterra":
    return array(
    'Londres','Manchester','Birmingham','Liverpool','Leeds');
    break;
    case 
    "Estados Unidos":
    return array(
    'Washington DC','Nueva York','Los Angeles''Chicago');
    break;
    case 
    "Australia":
    return array(
    'Canberra','Melbourne','Sydney''Brisbane');
    break;
     }
    }

    $pais=@$_GET['pais'];
    $ciudades=hazLo($pais);
    foreach (
    $ciudades as $ciudad) {
        echo 
    '|'.$ciudad;
    }
    ?>
    This example uses arrays, but you can easily change it to use mysql queries.

  • #3
    New Coder
    Join Date
    Mar 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am a little confused how you would add queries to this. Thanks

  • #4
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Change the PHP to something like this:
    PHP Code:
    $pais=@$_GET['pais']; 
    $ciudades='';
    $q=mysql_query("SELECT ciudad FROM '$paises'");
    while (
    $r=mysql_fetch_assoc($q)) {
    $ciudades.='|'.$r['ciudad'];

    echo 
    $ciudades
    Edit: Just in case this is at all confusing, 'pais' means 'country' and 'ciudad' means 'city'.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •