Combos dependientes

[Znet]

Hola que tal queria saber si alguien me podia ayudar con una cosa que necesito para un formulario de registro, tengo todos los datos y necesito hacer un combo dependiente para pais, provincia y ciudad, y lo queria hacer ajax vi un poco de sajax y xajax pero no logro entender mucho, y lo unico que necesitaria hacer con ajax esel combo dependiente asi que seguro se pasarian los parametros por get para no tocar la accion del formulario ya que la accion del form me lleva a otra pagina no se como hacerlo, obviamente la parte de de tomar el dato y consultar la base de datos para tomar las provincias en base a un pais lo hago con php, no si alguien llego a un ejemplo practico de esto y me puede orientar.

Desde ya muchas gracias de antemano
Saludos.-

[Holden]

Acá hay un ejemplo

http://www.hvaldez.com.ar/javascript...DinamicosAjax/

Saludos

[Znet]

Código PHP:

  <script language="javascript" type="text/javascript">
function nuevoAjax()
{ 
    /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
    lo que se puede copiar tal como esta aqui */
    var xmlhttp=false; 
    try 
    { 
        // Creacion del objeto AJAX para navegadores no IE
        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); 
    }
    catch(e)
    { 
        try
        { 
            // Creacion del objet AJAX para IE 
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
        catch(E) { xmlhttp=false; }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp=new XMLHttpRequest(); } 

    return xmlhttp; 
}


function cargaProvincia()
{
    var valor=document.getElementById("pais").options[document.getElementById("pais").selectedIndex].value;
    ajax=nuevoAjax();
    ajax.open("GET", "includes/combos.php?seleccionado="+valor, true);
    ajax.onreadystatechange=function() 
    { 
        if (ajax.readyState==4)
        { 
            document.getElementById("prov").innerHTML=ajax.responseText;
        } 
    }
    ajax.send(null);        
}
</script> 
  

Bueno tengo esto, la pagina combos.php me devuelve si es que el pais seleccionado tiene una provincia me tira un combo con las provincias, sino me tira un campo de texto para ingresar la provincia, ahora esto me funciona bien con IE6 pero con firefox no hay forma de que funcione, que tengo mal o que tengo que agregar para que funcione esto mismo en firefox o mozilla etc.

Desde ya muchas gracias y revise el link que me pasaste Holden pero es chino super basico para mi jajajajaja, con lo que tengo hecho hasta ahora me super sirve porque necesito solo esto, pero el tema es que no me funciona en todos los navegadores.

AYUDA PORFAVOR!!!!!!!
Saludos2

[EDIT]
Ya lo solucioné soy mas boludo yo, pasa que en el select me olvidaba de poner el id='pais'
Y como en IE me toma el nombre del elemento como id pero firefox no era ese el problema ahora ya me funciona de peluches.
Saludotes.-
BYE BYE

[jose2003]

El ejemplo dado la verdad que me resulto pero me paso lo siguiente cuando envio el formulario el segundo select no envio el seleccionado, y la ultima
Y si uno necesita que sean de 3 select como seria? ej: pais - provincia - localidad

Agradezco su ayuda gracias.

[Znet]

Código PHP:

  <?

<script language="javascript" type="text/javascript">
function nuevoAjax()
{ 
    /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
    lo que se puede copiar tal como esta aqui */
    var xmlhttp=false; 
    try 
    { 
        // Creacion del objeto AJAX para navegadores no IE
        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); 
    }
    catch(e)
    { 
        try
        { 
            // Creacion del objet AJAX para IE 
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
        catch(E) { xmlhttp=false; }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp=new XMLHttpRequest(); } 

    return xmlhttp; 
}


function cargaProvincia(id_prov)
{
    ajax=nuevoAjax();
    ajax.open("GET", "includes/combos.php?prov="+id_prov+"&num_ale="+Math.random(), true);
    ajax.onreadystatechange=function() 
    { 
        if (ajax.readyState==4)
        { 
            document.getElementById("prov").innerHTML=ajax.responseText;
        } 
    }
    ajax.send(null);        
}

function cargaLocalidad(id_loc)
{
    ajax=nuevoAjax();
    ajax.open("GET", "includes/combos2.php?loc="+id_loc+"&num_ale="+Math.random(), true);
    ajax.onreadystatechange=function() 
    { 
        if (ajax.readyState==4)
        { 
            document.getElementById("loc").innerHTML=ajax.responseText;
        } 
    }
    ajax.send(null);        
}
</script>  

?>  

Y en tus selects lo usas asi

en la pagina principal donde tienes los paises haces lo siguiente
<Select name=paises onchange=cargaProvincia(this.value)>
</select>

Luego en el combo.php
haces lo mismo
<Select name=paises onchange=cargaLocalidad(this.value)>
</select>

Y listo, eso es todo, te aclaro que le tenes que asignar un espacio a estas funciones me refiero a un div o una tabla que tengan el id de las funciones sino no vas a ver nada.

Saludos

[jose2003]

Gracias Znet, lo voy a probar y despues te cuento.

[jose2003]

Znet, no me anda el combo.php
yo estoy usando el ejemplo dado por Holden pero parece que tal cual esta no me sirve. cual es el codigo para que funcione bien

[zaqpz]

Acabo de subir al sitio de mi firma un script el cuál adiciona un 3º select dependiente de los otros dos. Posiblemente te resulte de utilidad. Utiliza el mismo concepto que el expuesto por Znet con la diferencia que utiliza la misma función para la carga de los dos selects dependientes.
Una alcaración: en lugar de utilizar un Math.random() en el open para evitar el cacheo de datos, pueden utilizar el método POST (http://www.forosdelweb.com/f127/open-get-post-391004/) o colocar el el archivo procesador las cabeceras de no-cache correspondientes (http://www.forosdelweb.com/showthread.php?t=373996).

Para cualquier duda aquí estamos.

Saludos.

[jose2003]

gracias zaqpz por tu ayuda. lo voy a intentar

[jose2003]

y para que sea un

Select cargado dinamicamente, que seleccione un valor

que codigo se agrega

[_ssx]

Bueno, todo esto muy bien, sin embargo tengo una duda?
Como recupero esos valores de los 3 combos para procesar esa información?

[Znet]

Pues como haces con los demas datos del formulario, recienbiendo por post el formulario o por get depende como lo estes haciendo

$combo1=$_POST['Pais'];
$combo2=$_POST['Provincia'];
$combo3=$_POST['Ciudad'];

Saludos

[jose2003]

Si quiero consultar los datos de mi base para poder actualizar los datos de la misma, como puedo hacer para que cada select quede en el pais - provincia - ciudad que le corresponde segun la consulta y que pueda cambiar las mismas usando el codigo presentado aca.

[Znet]

Bueno para eso, tendrias que consultar en la base de datos y traes esos valores, luego en el evento onload de la etiqueta body, cargas las funciones

Código PHP:

 <body onload="cargaProvincia('<?=id_pais?>');cargaLocalidad('<?=id_provincia?>')">  

Aunque con esto consigues que cuando se carga la pagina, obtengas las provincias y las cuidades del pais que ya esta cargado en la base de datos, faltaria modificar estas funciones para que quede seleccionada la provincia y la localidad, ejemplo
Cuando se toma Argentina de la base de datos es facil hacer que
<option value="102" selected>Argentina</option>
Ya que este dato lo traemos de la base de datos, ahora con de arriba solo obtendremos todas las provincias y las localidades de Argentina.

Para que aparezcan seleccionadas, a esas funciones, hay que pasarles otro parametro, que será el respectivo valor de Provincia y Localidad, quedando estas funciones asi

cargaProvincia

Código PHP:

  function cargaProvincia(id_prov,item_select)
{
    ajax=nuevoAjax();
    ajax.open("GET", "includes/combos.php?prov="+id_prov+"&item="+item_select+"&num_ale="+Math.random(), true);
    ajax.onreadystatechange=function() 
    { 
        if (ajax.readyState==4)
        { 
            document.getElementById("prov").innerHTML=ajax.responseText;
        } 
    }
    ajax.send(null);        
} 
   

cargaLocalidad

Código PHP:

  function cargaLocalidad(id_loc,item_select)
{
    ajax=nuevoAjax();
    ajax.open("GET", "includes/combos2.php?loc="+id_loc+"&item="+item_select+"&num_ale="+Math.random(), true);
    ajax.onreadystatechange=function() 
    { 
        if (ajax.readyState==4)
        { 
            document.getElementById("loc").innerHTML=ajax.responseText;
        } 
    }
    ajax.send(null);        
} 
   

Donde id_prov=id_pais // Esto trae todas las provincias del pais seleccionado
Donde item_select=id_provincia // Esto sirve para dejar seleccionada la provincia
-----------------------------------------------------------
Donde id_loc=id_prov // Esto trae todas las localidades de la provincia seleccionada
Donde item_select=id_loc // Esto sirve para dejar seleccionada la ciudad


Luego en tus PHP haces la clasica comprobacion en el while, y preguntas si ($_GET['item']==$row['id_prov'])?"selected":"";
y para el php de localidades ($_GET['item']==$row['id_localidad'])?"selected":"";

Por consiguiente, si realizas un insert, tus nuevas funciones para que sirvan para un insert o para un Update como este segundo caso, tendran que pasar 2 argumentos

<Select name=paises onchange=cargaProvincia(this.value,0)>
</select>

<Select name=provincia onchange=cargaLocalidad(this.value,0)>
</select>

Bueno espero que se haya entendido, es cuestion de renegar un poquito, espero les sirva de orientacion, avisen si les sirve, yo lo trabaje de esta forma para combos con 6 selects dependientes y no tuve dramas.
Ha me olvidaba si algun gurú sabe alguna otra forma que la comente, por ahi hay alguna forma mas sencilla de hacerlo.

Saludos!

[marthitha]

hola soy nueva en esto de programcion php y ajax.. lo que pasa es que tengo creado dos combos dependientes y si me lo hace. pero lo que quiero es que cuando haga una consulta a la base de datos y me muestre los datos directamente al combo... en base al id... que busque.. alguien me podria ayudar???

[Tato]

hola Holden, tengo una duda, los combos funcionan a la perfección, el tema es que le aplico un estilo a los combos, el primero todo bien, pero cuando me devuelve los modelos ese combo lo pierde, ya no se donde ponerlo. te agradecería si me podes orientar. Muchas Gracias

[Holden]

MMM mira la linea 17 del archivo GetModelo.php
En realidad como esta armado no es una buena practica... lo voy a rehacer bien como deberia ser.
Pero para salir del paso fijate ahi dodne te dije.
Saludos,

[Tato]

muchas gracias.

[gerazmv]

Hola estoy usando el ejemplo de Znet con 4 select anidados
Funiona perfecto y no demora casi nada en las busquedas . esta guapisimo
Ahora tengo un problema.
son 4 select anidados continente - pais - provincia - municipio

Cuando ingreso los datos hasta municipio funciona de maravilla
pero si yo cambio el continente. me cambia el listado de los paises pero me queda las provincias y municipios antiguos
me gustaria que el select quedara en blanco o que se escondiera

Alguna ayuda?

[mfaffo]

Buenas tardes a todos.
Os pido ayuda

esto es formulario.php

Código PHP:

  <?php require_once('Connections/conn.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
 
  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
 
  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}
 
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
  $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}
 
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form2")) {
  $insertSQL = sprintf("INSERT INTO anuncios (region, provincia, ciudad) VALUES (%s, %s, %s)",
                       GetSQLValueString($_POST['region'], "text"),
                       GetSQLValueString($_POST['provincia'], "text"),
                       GetSQLValueString($_POST['ciudad'], "text"),
                       
  mysql_select_db($database_conn, $conn);
  $Result1 = mysql_query($insertSQL, $conn) or die(mysql_error());
 
  $insertGoTo = "ver_form.php";
  if (isset($_SERVER['QUERY_STRING'])) {
    $insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?";
    $insertGoTo .= $_SERVER['QUERY_STRING'];
  }
  header(sprintf("Location: %s", $insertGoTo));
}
?>
 
<?php
 
mysql_select_db($database_conn, $conn);
 
$query_Regiones = "SELECT * FROM regiones ORDER BY region ASC";
$Regiones = mysql_query($query_Regiones, $conn) or die(mysql_error());
$row_Regiones = mysql_fetch_assoc($Regiones);
$totalRows_Regiones = mysql_num_rows($Regiones);
 
$colname_Provincias = "-1";
if (isset($_POST['id_region'])) {
  $colname_Provincias = $_POST['id_region'];
}
mysql_select_db($database_conn, $conn);
 
$query_Provincias = sprintf("SELECT id_provincia, provincia FROM provincias WHERE id_region = '%s' ORDER BY provincia ASC", $colname_Provincias);
$Provincias = mysql_query($query_Provincias, $conn) or die(mysql_error());
$row_Provincias = mysql_fetch_assoc($Provincias);
$totalRows_Provincias = mysql_num_rows($Provincias);
 
$colname_Ciudades = "-1";
if (isset($_POST['id_provincia'])) {
  $colname_Ciudades = $_POST['id_provincia'];
}
mysql_select_db($database_conn, $conn);
 
$query_Ciudades = sprintf("SELECT id_ciudad, ciudad FROM ciudades WHERE id_provincia = '%s' ORDER BY ciudad ASC", $colname_Ciudades);
$Ciudades = mysql_query($query_Ciudades, $conn) or die(mysql_error());
$row_Ciudades = mysql_fetch_assoc($Ciudades);
$totalRows_Ciudades = mysql_num_rows($Ciudades);
 
 
?>
<style type="text/css">
<!--
.Estilo1 {font-size: 9px}
.Estilo2 {font-size: 10px}
.Estilo3 {font-size: 12px}
-->
</style>
 
 
<style type="text/css">
<!--
.Estilo5 {font-size: 24px}
-->
</style>
<form name="form1" method="post" action="">
   
  <table width="76%" border="0" align="center">
    <tr align="center" valign="middle"> 
      <td height="47" colspan="3">&nbsp;</td>
    </tr>
    <tr align="center" valign="middle"> 
      <td height="48" colspan="3"><span class="Estilo5">Ubicacion Inmueble </span></td>
    </tr>
    <tr align="center" valign="middle"> 
      <td width="31%" height="41"><strong>Region:</strong></td>
      <td height="41"><select name="id_region" id="select9" onChange="submit()">
          <option value="" <?php if (!(strcmp("", $_POST['id_region']))) {echo "SELECTED";} ?>>Seleccionar</option>
          <?php
do {  
?>
          <option value="<?php echo $row_Regiones['id_region']?>"<?php if (!(strcmp($row_Regiones['id_region'], $_POST['id_region']))) {echo "SELECTED";} ?>><?php echo $row_Regiones['region']?></option>
          <?php
} while ($row_Regiones = mysql_fetch_assoc($Regiones));
  $rows = mysql_num_rows($Regiones);
  if($rows > 0) {
      mysql_data_seek($Regiones, 0);
      $row_Regiones = mysql_fetch_assoc($Regiones);
  }
?>
        </select></td>
    </tr>
    <tr align="center" valign="middle"> 
      <td height="40"><strong>Provincia:</strong> </td>
      <td height="40"><select name="id_provincia" id="select7" onChange="submit()">
          <option value="" <?php if (!(strcmp("", $_POST['id_provincia']))) {echo "SELECTED";} ?>>Seleccionar</option>
          <?php
do {  
?>
          <option value="<?php echo $row_Provincias['id_provincia']?>"<?php if (!(strcmp($row_Provincias['id_provincia'], $_POST['id_provincia']))) {echo "SELECTED";} ?>><?php echo $row_Provincias['provincia']?></option>
          <?php
} while ($row_Provincias = mysql_fetch_assoc($Provincias));
  $rows = mysql_num_rows($Provincias);
  if($rows > 0) {
      mysql_data_seek($Provincias, 0);
      $row_Provincias = mysql_fetch_assoc($Provincias);
  }
?>
        </select></td>
    </tr>
    <tr align="center" valign="middle"> 
      <td height="42"><strong>Ciudad:</strong> </td>
      <td width="43%" height="42"><select name="id_ciudad" id="select6" onChange="submit()">
          <option value="" <?php if (!(strcmp("", $_POST['id_ciudad']))) {echo "SELECTED";} ?>>Seleccionar</option>
          <?php
do {  
?>
          <option value="<?php echo $row_Ciudades['id_ciudad']?>"<?php if (!(strcmp($row_Ciudades['id_ciudad'], $_POST['id_ciudad']))) {echo "SELECTED";} ?>><?php echo $row_Ciudades['ciudad']?></option>
          <?php
} while ($row_Ciudades = mysql_fetch_assoc($Ciudades));
  $rows = mysql_num_rows($Ciudades);
  if($rows > 0) {
      mysql_data_seek($Ciudades, 0);
      $row_Ciudades = mysql_fetch_assoc($Ciudades);
  }
?>
        </select></td>
      <td width="26%" height="42"><a href="#" target="reminder" onClick='window.open("ins_ciudad.php","reminder","width=250,height=160,scrollbars=0,resizable=0"); return false;'>Insertar 
        Ciudad </a></td>
    </tr>
  </table>
   </form>
  
  <form action="<?php echo $editFormAction; ?>" method="POST" enctype="multipart/form-data" name="form2" id="form2">
          
      <input name="region" type="hidden" id="region" value="<?php echo $_POST['id_region'];?>">
      <input name="provincia" type="hidden" id="provincia" value="<?php echo $_POST['id_provincia'];?>">
      <input name="ciudad" type="hidden" id="ciudad" value="<?php echo $_POST['id_ciudad'];?>">
      
    <label><input name="Submit" type="submit" id="Submit" accesskey="E" value="Enviar" />
</label>
<input type="hidden" name="MM_insert" value="form2">
</form>
 
  <?php
 
mysql_free_result($Regiones);
 
mysql_free_result($Provincias);
 
mysql_free_result($Ciudades);
 
?>   

como compilo el script de ins_ciudad para que inserte en la base de datos la ciudad y se actualize en nel select de formulario.php sin que pierda la informacion ya puesta antes.

El codigo es mas largo pero no me entrava.
Gracias [email protected]

[argalpalo]

Nadie tiene la forma de hacer exactamente esto mismo pero en le modulo CGI::Ajax de PERL?? el que lo tenga se lo agradesco.

[pamr22]

Quisiera saber por favor la dirección donde está los script que usa Znet para los casos de Combos dependientes.

pamr22

[MaBoRaK]

loading..............

http://www.formatoweb.com.ar/ajax/se...pendientes.php

connection closed.

[pamr22]

Gracias MaBoRaK, voy a estudiarlo ya te cuento.

Gracias.

pamr22

[Javo2k]

Lo mismo pero con java , jsp o servlet??? alguna sugerencia dos combo box pero que se cargue cada uno a partir del otro ??

[MaBoRaK]

loading.........


LA IDEA ES LA MISMA, no se porque se complican con eso, AJAX es un método que funciona de forma SEPARADA respecto al SERVIDOR DE DATOS (php,jsp,asp)... la lógica es fácil de implementar ya que en su server deben "soltar datos"... la forma de como hacerlo... eso ya uno sabe dependiendo del lenguaje que programen.

Por ejemplo en PHP se como hacer un echo de una cadena a partir de variables recibidas por POST o GET supongo que en JSP igual lo saben no?.

PRAGMATISMO SEÑORES !!!


connection closed.

[chavamx]

Hola que tal, pues he estado haciendo pruebas con el codigo de http://www.formatoweb.com.ar/ajax/se...pendientes.php y me funciona bien para 4 select, pero lo que pasa es que tengo digamos 4 tablas uno para cada select, de la tercera no solo quiero sacar el id necesario para llamar al cuarto select, sino quiero que al seleccionar el tercer campo me ubique en un input text otro atributo, como por ejemplo que me muestre la poblacion de todo el estado y mientras me pide seleccionar el municipio. No se si alguien pueda ayudar a resolver este problema. de antemano muchas gracias.

[chavamx]

Miren igual y no me expliqué muy bien, pero encontre más o menos una aplicacion parecida a lo que quiero, pero como la verdad, apenas estoy empezando con ajax pues no le entendi casi nada. Por si a alguien se le a pasado y entiende un poco más el codigo que yo, aqui les dejo la pagina para que la chequen(http://www.simply-postcode-lookup.co...X_PHP_Full.htm), pero si alguien quisiera y tuviera el tiempo para hecharme la mano al resolver mi problema estaria muy agradecido. Quiero que despues de escojer una opcion en el select me desplegue en inputs los resultados de la consulta (como en la pagina anterior) nada mas que el select que voy a utilizar para la consulta es dependiente de otros dos y estos son generados mediante la lectura de un array(http://www.formatoweb.com.ar/ajax/se...pendientes.php).

Por su atencion muchas gracias y de verdad espero que alguien tenga el tiempo y las ganas de ayudarme.