Problema con selects y javascript

Sairox · #1 (**permalink**) 06/09/2011, 08:11

buenas tardes, tengo el siguiente codigo anexo mas adelante, resulta que necesito que un campo select al momento de escojerse un nombre automaticamente se muestre los campos correspondientes a dicho nombre en el siguiente select... que pasa.. bueno el codigo sin formato php me funciona perfectamente pero el problema viene mas adelante... necesito que estos campos select me funcionen 100% con datos de mi base de datos tal cual que al momento de seleccionar por ejemplo en el select 1 algun campo de la base de datos el mismo me ubique en el segundo select solo los campos que corresponden al campo anteriormente seleccionado, me imagino que esto se logra por medio del ID... bueno el problema que tengo a continuacion es que en el momento que agrego php de consulta al primer select me funciona, arreglo el javascript y bien todo bien hasta alli, pero cuando en el segundo select agrego php :S de inmediato se daña no funciona la consulta... se que tengo parte del codigo mal, podrian por favor ayudarme es urgente... muchas gracias por leer mi consulta.

Código PHP:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript"> 
//<![CDATA[ 
 
function getcategoria(tipo) 
{ 
 
 
 
 
var categoria; 
//categoria = document.getElementById('tipo'); 
categoria = tipo.value; 
 
document.getElementById('hotel').style.display='none'; 
document.getElementById('pension').style.display='none'; 
document.getElementById('ABC').style.display='none'; 
document.getElementById('casarural').style.display='none'; 
document.getElementById('museo').style.display='none'; 
document.getElementById('arquitectura').style.display='none'; 
document.getElementById('otrosespacios').style.display='none'; 
document.getElementById('tiendasropa').style.display='none'; 
document.getElementById('bares').style.display='none'; 
document.getElementById('pub').style.display='none'; 
document.getElementById('restaurante').style.display='none'; 
document.getElementById('termalismo').style.display='none'; 
 
switch(categoria) 
{ 
case 'Hotel': 
document.getElementById('hotel').style.display='block'; 
break; 
case "Pension": 
document.getElementById('pension').style.display='block'; 
break; 
case "ABC": 
document.getElementById('ABC').style.display='block'; 
break; 
case "Casa Rural": 
document.getElementById('casarural').style.display='block'; 
break; 
case "Museo": 
document.getElementById('museo').style.display='block'; 
break; 
case "Arquitectura": 
document.getElementById('arquitectura').style.display='block'; 
break; 
case "Otros espacios": 
document.getElementById('otrosespacios').style.display='block'; 
break; 
case "Tiendas de ropa": 
document.getElementById('tiendasropa').style.display='block'; 
break; 
case "Bares y cafeterias": 
document.getElementById('bares').style.display='block'; 
break; 
case "Pubs": 
document.getElementById('pub').style.display='block'; 
break; 
case "Restaurante": 
document.getElementById('restaurante').style.display='block'; 
break; 
case "Termalismo": 
document.getElementById('termalismo').style.display='block'; 
break; 
} 
 
} 
//]]> 
</script> 
 
 
</head> 
 
<body> 
 
 
 
 
<form name="formulario" method="post" action="procesar_marca.php" onsubmit="return validar()"> 
 
<div id="nombre"> 
<table><tr><td> 
<label>Nombre:</label> 
<label><input name="nombre" type="text" size="50" /></label> 
</td></tr><tr><td> 
<label>Tipo:</label> 
<label><select name="tipo" id="tipo" onchange="getcategoria(this);"> 
<option selected value="Hotel">Hotel</option> 
<option value="Pension">Pension</option> 
 
<? 
include ("conexion.php"); 
 
 
$sql="SELECT * FROM cursos"; 
$resultado=mysql_query($sql) or die(mysql_error()); 
while ($row=mysql_fetch_array($resultado)){ 
   echo "<option value=\"".ABC."\">".$row['curso']."</option>\n";   
}  
mysql_close($link); //cierra la conexion       
  ?>     
   
   
<option value="Casa Rural">Casa Rural</option> 
<option value="Museo">Museo</option> 
<option value="Arquitectura">Arquitectura</option> 
<option value="Otros espacios">Otros espacios</option> 
<option value="Tiendas de ropa">Tiendas de ropa</option> 
<option value="Bares y cafeterias">Bares y cafeterias</option> 
<option value="Pubs">Pubs</option> 
<option value="Restaurante">Restaurante</option> 
<option value="Termalismo">Termalismo</option> 
</select> 
</label> 
</td></tr></table> 
</div> 
<div id="hotel" style="display:block;"> 
<label>Categoria:</label> 
<label><select name="cathotel" > 
<option selected>4 Estrellas</option> 
<option>3 Estrellas</option> 
<option>2 Estrellas</option> 
<option>1 Estrella</option> 
</select> 
</label> 
</div> 
<div id="pension" style="display:none;"> 
<label>Categoria:</label> 
<label><select name="catpension" > 
<option selected>3 Estrellas</option> 
<option>2 Estrellas</option> 
<option>1 Estrella</option> 
</select> 
</label> 
</div> 
<div id="ABC" style="display:none;"> 
<label>Categoria:</label> 
<label><select name="catABC" > 
<? 
$sql="SELECT nivel FROM cursos"; 
$resultado=mysql_query($sql) or die(mysql_error()); 
while ($row=mysql_fetch_array($resultado)){ 
   echo "<option>".$row['nivel']."</option>\n"; 
}  
  ?>  
</select> 
</label> 
</div> 
<div id="casarural" style="display:none;"> 
<label>Categoria:</label> 
<label><select name="catcasarural" > 
<option selected>Grupo A</option> 
<option>Grupo B</option> 
<option>Grupo C</option> 
</select> 
</label> 
</div> 
<div id="museo" style="display:none;"> 
<label>Categoria:</label> 
<label><select name="catmuseo" > 
<option selected>Arqueol&oacute;gico</option> 
<option>Cera</option> 
<option>Tem&aacute;tico</option> 
</select> 
</label> 
</div> 
<div id="arquitectura" style="display:none;"> 
<label>Categoria:</label> 
<label><select name="catarquitectura" > 
<option selected>Catedral</option> 
<option>Iglesia</option> 
<option>Centro Hist&oacute;rico</option> 
<option>Puente</option> 
<option>Edificio</option> 
</select> 
</label> 
</div> 
<div id="otrosespacios" style="display:none;"> 
<label>Categoria:</label> 
<label><select name="catotrosespacios" > 
<option selected>Estatua</option> 
<option>Parque</option> 
<option>Exposici&oacute;n</option> 
</select> 
</label> 
</div> 
<div id="tiendasropa" style="display:none;"> 
<label>Categoria:</label> 
<label><select name="cattiendasropa" > 
<option selected>Deporte</option> 
<option>Informal</option> 
</select> 
</label> 
</div> 
<div id="bares" style="display:none;"> 
<label>Categoria:</label> 
<label><select name="catbares" > 
<option selected>Bar</option> 
<option>Cafeteria</option> 
</select> 
</label> 
</div> 
<div id="pub" style="display:none;"> 
<label>Categoria:</label> 
<label><select name="catpub" > 
<option selected>Primera hora</option> 
<option>&Uacute;ltima hora</option> 
</select> 
</label> 
</div> 
<div id="restaurante" style="display:none;"> 
<label>Categoria:</label> 
<label><select name="catrestaurante" > 
<option selected>3 tenedores</option> 
<option>2 tenedores</option> 
<option>1 tenedor</option> 
</select> 
</label> 
</div> 
<div id="termalismo" style="display:none;"> 
<label>Categoria:</label> 
<label><select name="cattermalismo" > 
<option selected>Gratis</option> 
<option>Pago</option> 
</select> 
</label> 
</div> 
<div> 
<table><tr><td> 
<label align="top">Descripcion Breve:</label></td><td> 
<label><textarea name="descripcion" cols="25" rows="5"></textarea></label> 
</td></tr> 
<tr><td> 
<label>Foto cabecera</label></td><td> 
<label><input type="file" name="foto" /></label> 
</td></tr> 
<tr><td> 
<label>Descripcion:</label></td><td> 
<label><textarea name="descripcion" cols="50" rows="19"></textarea></label> 
</td></tr> 
<tr><td> 
<label>Latitud:</label></td><td> 
<label><input type="text" name="lat" /></label> 
</td></tr> 
<tr><td> 
<label>Longitud:</label></td><td> 
<label><input type="text" name="lng" /></label> 
</td></tr> 
<tr><td> 
<input type="submit" name="enviar" value="Enviar formulario" /></td><td> 
<input type="reset" name="vaciar" value="Vaciar" /> 
</td></tr> 
</table> 
</div> 
</form>  
</body> 
</html>

vgonga1986 · #2 (**permalink**) 06/09/2011, 08:52

Buenas,

Para empezar, cambia los tags cortos (<? ?>) de apertura de PHP por los largos (<?php ?>), te puede dar problemas en algunos servidores.

En cuanto a lo que comentas, creo que puede ser por esta línea:

Código PHP:

Ver originalmysql_close($link); //cierra la conexion

Estás cerrando la conexión después del primer select, pero luego intentas ejecutar una consulta. Si la conexión está ya cerrada, debería darte error por eso. Prueba a bajar la línea esa al final del segundo select.

Un saludo.

Sairox · #3 (**permalink**) 06/09/2011, 09:01

hola muchas gracias amigo si me funciono asi pero ahora tengo una pequeña duda xD como hago para que solo me busque el nivel del campo seleccionado??? sucede que por ejemplo si tengo 2 campos me busca el nivel de los dos campos xD ayuda con esto solo me falta eso

vgonga1986 · #4 (**permalink**) 06/09/2011, 09:05

No entiendo tu pregunta, no sé a qué te refieres con el nivel.

Un saludo.

Sairox · #5 (**permalink**) 06/09/2011, 09:25

osea pasa que por ejemplo tengo un campo llamado nivel y otro curso... entonces por ejemplo quiero que en el primer select me salgan todos los campos que esten dentro de curso, perooo que cuando yo seleccione por ejemplo el curso de "hacer arepas" en el segundo select solo me muestre el campo nivel peroooo el que corresponde a hacer arepas no se si me explico?

vgonga1986 · #6 (**permalink**) 06/09/2011, 09:35

Bueno, ya estamos hablando de otra cosa, la verdad me sorprendió mucho el código, porque lo que tú haces es poner todos los combos que quieres, pero ocultarlos (con hidden) y con JS muestras el que quieres en cada momento. Esto es una gran chapuza (no sé si lo has hecho tú o lo has sacado de por ahí), pero como la pregunta no iba en ese sentido, no te dije nada y me limité a responder a tu pregunta.

Ahora si va en ese sentido. Te comento, el problema es que tú montas todos los select posibles antes incluso de saber qué ha elegido el usuario y luego muestras el que elija. Esto está bien si son un par y si son estáticos, pero ahora quieres que el select sea diferente en función de lo que elijas y con datos de la base de datos. Es mucho más complejo que eso, si no quieres volverte loco poniendo 2 millones de posibles selects, te aconsejo que pegues una búsqueda en google. Lo que buscas se conoce como "select dependientes" y se puede hacer con AJAX, que queda mucho más vistoso y potente. Te paso un link que lo explica, pero olvídate de hacerlo como lo tienes, porque si insertas datos de la base de datos, no se puede hacer como lo tienes tú.

Un saludo.

Sairox · #7 (**permalink**) 06/09/2011, 10:02

ok intentare como me dices, el codigo lo saque de una pagina en internet en el que hacian la consulta con algo similar pero no funcional lo que hice fue tomarlo y modificarlo ummm pensaba que me funcionaria si obtenia el id y luego en la siguiente consulta le decia que me buscara lo que le pedia osea solo el id pero no se ocmo hacer para obtener el id por medio de la primera consulta y ps alli me quede parado... xD

vgonga1986 · #8 (**permalink**) 06/09/2011, 10:12

Puedes hacerlo así, pero tienes que separar en dos el formulario.

Es decir, tienes que poner un primer formulario únicamente con el select que va a definir el otro select. En el onchange de este select haces submit del primer formulario y en el action indicas que la página a la que se envía el value es la misma. luego, todo lo demás lo incluyes en otro formulario. Cuando algún usuario entre en la página y selecciones una opción del primer select, se enviará (de forma transparente, es decir, no tiene que pulsar el botón, pero si se le recarga la página, se le quedará en blanco un instante) el primer form y con ese dato ya montas el segundo.

Es otra forma de hacerlo, pero por un pelín más de esfuerzo tienes un primer acercamiento a AJAX (que te valdrá, te lo aseguro) y, además, obtienes un resultado más robusto, la página no se recarga, sino que se hace con JS, es totalmente transparente al usuario.

Un saludo.

Sairox · #9 (**permalink**) 06/09/2011, 10:58

pues si eso estoy viendo jeje es mucho mas simple xD lo costoso es que son mas paginas pero no es mucho mas facil muchas gracias por tu aydua

Sairox · #10 (**permalink**) 06/09/2011, 12:35

hey amigo sabes que no entiendo algo aqui... este es el codigo principal:

Código PHP:

  <?php
// Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido
$listadoSelects=array(
"paises"=>"lista_paises",
"estados"=>"lista_estados",
"instructor"=>"lista_instructores"
);

function validaSelect($selectDestino)
{
    // Se valida que el select enviado via GET exista
    global $listadoSelects;
    if(isset($listadoSelects[$selectDestino])) return true;
    else return false;
}

function validaOpcion($opcionSeleccionada)
{
    // Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico
    if(is_numeric($opcionSeleccionada)) return true;
    else return false;
}

$selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"];

if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada))
{
    $tabla=$listadoSelects[$selectDestino];
    include 'conexion2.php';
    conectar();
    $consulta=mysql_query("SELECT id, opcion FROM $tabla WHERE relacion='$opcionSeleccionada'") or die(mysql_error());
    desconectar();
    
    // Comienzo a imprimir el select
    echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";
    echo "<option value='0'>Elige</option>";
    while($registro=mysql_fetch_row($consulta))
    {
        // Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion
        $registro[1]=htmlentities($registro[1]);
        // Imprimo las opciones del select
        echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
    }            
    echo "</select>";
}
?>

este funciona solo con dos select... pero como hago para que el 3er select tambien funcione pero con una tabla diferente.... me imagino que aqui se especifica.. en el array arriba... pero bueno me funciona hasta donde me selecciona el segundo select, pero entonces ahora el tercero me muestra error :S el siguiente"Unknown column 'opcion' in 'field list'" este error se muestra despues de seleccionar el segundo select :S me ayudas con esto... necesito agregar varios select de la misma manera :S

lisot ya solucione el problema era que tenia algo mal en la tabla disculpen...

vgonga1986 · #11 (**permalink**) 06/09/2011, 12:48

Me alegro que dieras con la clave, no había visto el post antes. Pues nada, ya tienes el primer contacto con AJAX, que tan de moda está, ves que no es para tanto.

Un saludo.