selects dependientes
Publicado por Alex (1 intervención) el 15/11/2010 13:11:55
Hola a todos, necesito hacer dos selects dependientes en un formulario.
* El primer select mostrará nombre de usuarios de la base de datos.
* El segundo select mostrará los emails pertenecientes al usuario seleccionado en el primer select.
Tengo los siguientes ficheros con sus respectivos códigos:
index.php:
<?php
include_once ('conexion.php');
conectar();
?>
<!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=iso-8859-1" />
<title>INDEX</title>
<script type="text/javascript" src="cargarEmails.js"></script>
<script type="text/javascript" src="../jquery.js"></script>
</head>
<body>
<?php $usuarios=mysql_query("SELECT * from t_usuarios");?>
<form id="form" action="" method="post" class="niceform">
<dl><dt> <label><span class="rojo">*</span> Usuario :</label></dt>
<dd> <select name="usuario" id="usuario" onchange="cargarEmails();" />
<option value="null">Selecciona un usuario</option>
<?php while($row=mysql_fetch_assoc($usuarios)){
print '<option value="'.$row['id_usuario'].'" >'.$row['nom_usuario'].'</option>';
}?>
</select>
</dd>
</dl>
<dl><dt> <label><span class="rojo">*</span> Email :</label></dt>
<dd> <select name="email" id="email" />
<option value="null">Selecciona un email</option>
</select></dd>
</dl>
</form>
</body>
</html>
ajax_emails.php:
<?php
include_once ('conexion.php');
conectar();
?>
<!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=iso-8859-1" />
<title>Documento sin título</title>
</head>
<body>
<?php
echo "GETusuario vale: ".$_GET['usuario']."<br>";
$usuario= $_GET['usuario'];
$emails=mysql_query("SELECT * FROM t_useremail WHERE id_usuario = '$usuario'");
?>
<?php
while($row= mysql_fetch_assoc($emails)){
echo '<option value="'.$row['id_useremail'].'">'.$row['email'].'</option>';
}
?>
</body>
</html>
cargarEmails.js:
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<!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">
function cargarEmails(){
$('#email').html('<option selected>Cargando</option>');
var idusuario= $('#usuario').val();
var toLoad= 'ajax_emails.php?usuario='+ idusuario ;
$.post(toLoad,function (responseText){
$('#email').html(responseText);
});
}
Creo que el principal problema es que no consigo enviar por get el usuario con lo que no se carga el segundo select con las opciones de email del usuario seleccionado.
Ando un poco perdido y agradecería cualquier tipo de ayuda.
Saludos.
* El primer select mostrará nombre de usuarios de la base de datos.
* El segundo select mostrará los emails pertenecientes al usuario seleccionado en el primer select.
Tengo los siguientes ficheros con sus respectivos códigos:
index.php:
<?php
include_once ('conexion.php');
conectar();
?>
<!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=iso-8859-1" />
<title>INDEX</title>
<script type="text/javascript" src="cargarEmails.js"></script>
<script type="text/javascript" src="../jquery.js"></script>
</head>
<body>
<?php $usuarios=mysql_query("SELECT * from t_usuarios");?>
<form id="form" action="" method="post" class="niceform">
<dl><dt> <label><span class="rojo">*</span> Usuario :</label></dt>
<dd> <select name="usuario" id="usuario" onchange="cargarEmails();" />
<option value="null">Selecciona un usuario</option>
<?php while($row=mysql_fetch_assoc($usuarios)){
print '<option value="'.$row['id_usuario'].'" >'.$row['nom_usuario'].'</option>';
}?>
</select>
</dd>
</dl>
<dl><dt> <label><span class="rojo">*</span> Email :</label></dt>
<dd> <select name="email" id="email" />
<option value="null">Selecciona un email</option>
</select></dd>
</dl>
</form>
</body>
</html>
ajax_emails.php:
<?php
include_once ('conexion.php');
conectar();
?>
<!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=iso-8859-1" />
<title>Documento sin título</title>
</head>
<body>
<?php
echo "GETusuario vale: ".$_GET['usuario']."<br>";
$usuario= $_GET['usuario'];
$emails=mysql_query("SELECT * FROM t_useremail WHERE id_usuario = '$usuario'");
?>
<?php
while($row= mysql_fetch_assoc($emails)){
echo '<option value="'.$row['id_useremail'].'">'.$row['email'].'</option>';
}
?>
</body>
</html>
cargarEmails.js:
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<!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">
function cargarEmails(){
$('#email').html('<option selected>Cargando</option>');
var idusuario= $('#usuario').val();
var toLoad= 'ajax_emails.php?usuario='+ idusuario ;
$.post(toLoad,function (responseText){
$('#email').html(responseText);
});
}
Creo que el principal problema es que no consigo enviar por get el usuario con lo que no se carga el segundo select con las opciones de email del usuario seleccionado.
Ando un poco perdido y agradecería cualquier tipo de ayuda.
Saludos.
Valora esta pregunta
0