...

View Full Version : a selection in a list to populate another list on the same form



husnamina
02-27-2007, 03:44 PM
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.:(

BonRouge
02-27-2007, 05:33 PM
Hi. You can do this with AJAX.
Here's an example: http://bonrouge.com/demos/cadenaselect.php

cadenaselect.php
<!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
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.

rschoenbach
03-14-2007, 02:54 PM
I am a little confused how you would add queries to this. Thanks

BonRouge
03-14-2007, 03:05 PM
Change the PHP to something like this:
$pais=@$_GET['pais'];
$ciudades='';
$q=mysql_query("SELECT ciudad FROM '$paises'");
while ($r=mysql_fetch_assoc($q)) {
$ciudades.='|'.$r['ciudad'];
}
echo $ciudades;


Just in case this is at all confusing, 'pais' means 'country' and 'ciudad' means 'city'.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum