I need help :(
I've got a problem with dependent selects in two levels, I have two selects, one for country and other for city. The problem is that when I selected a country, the select cities shows me a part of my html page, I can't locate where I have the error ...
// JavaScript Document
var conexion = null;
function crearXMLHttpRequest() {
var xmlhttp=false;
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E){
if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
}
}
return xmlhttp;
}
//declaramos los dropdowns del documento HTML
var listadoSelects = new Array();
listadoSelects[0] = "pais";
listadoSelects[1] = "ciudad";
/*funcion que devuelve la posicion donde esta el elemento dentro del array*/
function buscar(array, valor){
var i = 0;
while(array[i]){
if(array[i] == valor){
return i;
i++;
}
}
return null;
}
function cargarContenido(idOrigen){
//cojemos la posicion que ocupa el dropdown que tiene que ser puesto en el array
var posicionDestino = buscar(listadoSelects,idOrigen)+1;
//obtenemos el dropdown que el usuario ha modificado
var origen = document.getElementById(idOrigen);
//obtenemos la opcion seleccionada
var seleccionada = origen.options[origen.selectedIndex].value;
//si el usuario eligio la opcion Elige.. no buscaremos nada en la BBDD
if(seleccionada == ""){
var x = posicionDestino;
var actual = null;
//deshabilitamos las opciones de el select dependiente ya que no hemos seleccionado ningun valor
while(listadoSelects[x]){
actual = document.getElementById(listadoSelects[x]);
actual.length = 0;
var nuevaOpcion = document.createElement("option");
nuevaOpcion.value = 0;
nuevaOpcion.innerHTML = "Selecciona una opción..";
actual.appendChild(nuevaOpcion);
actual.disabled = true;
x++;
}
}else if(idOrigen != listadoSelects[listadoSelects.length-1]){
var idDestino = listadoSelects[posicionDestino];
var destino = document.getElementById(idDestino);
var ajax = crearXMLHttpRequest();
ajax.open("GET","action.php?action=dependientes&select="+idDestino+"&option="+seleccionada, true);
ajax.onreadystatechange = function(){
if(ajax.readyState == 1){
destino.length = 0;
var nuevaOp = document.createElement("option");
nuevaOp.value = 0;
nuevaOp.innerHTML = "Cargando...";
destino.appendChild(nuevaOp);
destino.disabled = true;
}if(ajax.readyState == 4){
destino.parentNode.innerHTML = ajax.responseText;
}
}
ajax.send(null);
}
}<!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" lang="es-es">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="font-awesome-4.5.0/css/font-awesome.min.css"/>
<link href="css/css.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="css/icSquared_v1.0.css"/>
<title>Información del usuario</title>
</head>
<body>
<div>
<div class="registro">
<div class="container-fluid">
<div class="col-xs-12 col-sm-12 col-md-2" style="left:79%; margin-top:2%">
<?php echo $msgReg; ?>
<form action="action.php?accion=userRegisterInfo" method="post" role="form" enctype="multipart/form-data">
<h3 class="text-center" style="font-size:35px"> Datos Personales </h3><br />
<div class="form-group">
<label>Que eres?</label>
<?php desplegable_tipoUser(-1); ?>
</div>
<div class="form-group">
<label>Nombre</label>
<input type="text" name="nombre" class="form-control" required="required" placeholder="Introduce tu nombre"/>
</div>
<div class="form-group">
<label>Apellidos</label>
<input type="text" name="apellidos" class="form-control" required="required" placeholder="Introduce tus apellidos"/>
</div>
<div class="form-group">
<label>Fecha de nacimiento</label>
<input type="date" name="fechaNac" required="required" />
</div>
<div class="form-group">
<label>Sexo:</label><br />
<input type="radio" name="sexo" value="male" checked="checked"/> <i class="fa fa-mars fa-lg"></i> Hombre
<input type="radio" name="sexo" value="female" /> <i class="fa fa-venus fa-lg"></i> Mujer
</div>
<div class="form-group">
<label>Pais:</label>
<?php desplegable_pais(); ?>
</div>
<div class="form-group">
<label>Población:</label>
<select disabled="disabled" name="ciudad" id="ciudad">
<option value="0">Selecciona una opción..</option>
</select>
</div>
<div class="form-group">
<label>Imagen de Perfil:</label>
<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
<input type="file" enctype="multipart/form-data" name="foto_perfil" required="required">
</div>
<br/>
<input class="btn btn-success" type="submit" id="enviar" value="Guardar" style="margin-left:40%"/>
</form>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/selectsDependientes.js"></script>
</body>
</html>if you could help me would be a great help.
thanks to all! Here's the PHP code:
<?php
//connect BD function
function conectar(){
$connect = mysqli_connect("localhost","root","xxxx","xxxx");
//set the language
$connect->query("SET NAMES 'utf8'");
return $connect;
}
//disconect BD function
function desconectar($connect){
mysqli_close($connect);
}
//dropdown tipo usuario
function desplegable_tipoUser($idTUser){
$conexion = conectar();
$sql = "SELECT * FROM TUSUARIO";
echo '<select name="tusuario">';
if($resultado = $conexion -> query($sql)){
while($fila = mysqli_fetch_array($resultado)){
if($fila[0] == $idTuser){
echo '<option value="'.$fila[0].'" selected>'.$fila[1].'</option>';
}else{
echo '<option value="'.$fila[0].'">'.$fila[1].'</option>';
}
}
}
echo '</select>';
desconectar($conexion);
}
//dropdown pais function desplegable_pais(){ $conexion = conectar(); $sql = "SELECT * FROM PAIS";
echo '<select name="pais" id="pais" onChange="get_ciudad(this.value);">';
echo '<option value="0">Elige un País</option>';
if($resultado=$conexion->query($sql)){
while($fila=mysqli_fetch_array($resultado)){
echo '<option value="'.$fila[0].'">'.$fila[1].'</option>';
}
}else{
echo '<p> Error en la conexion o consulta.. </p> <br />';
}
echo '</select>';
desconectar($conexion);
}
//dropdown de las poblaciones
function desplegable_ciudad(){
$conexion = conectar();
$sql = "SELECT * FROM POBLACION";
echo '<select name="ciudad" id="ciudad">';
echo '<option value="0">Elige una poblacion</option>';
if($resultado = $conexion -> query($sql)){
while($fila=mysqli_fetch_array($resultado)){
echo '<option value="'.$fila[0].'">'.$fila[2]." - ".$fila[3].'</option>';
}
}else{
echo '<p> Error en la conexion o consulta.. </p> <br />';
}
echo '</select>';
desconectar($conexion);
}
?>
<?php
if($action == "dependientes"){
$listadoSelects=array(
"pais"=>"lista_pais",
"ciudad"=>"lista_ciudad"
);
$destino = $_GET['select'];
$seleccionado = $_GET['option'];
//funcion que valida que el select enviado por GET exista
function validar($destino){
global $listadoSelects;
$validado = false;
if(!isset($listadoSelects[$destino])){
$validado = true;
}
return $validado;
}
//funcion que valida la opcion seleccionada
function validarOp($seleccionado){
$validado = false;
if(is_numeric($seleccionado)){
$validado = true;
}
return $validado;
}
if(validar($destino) && validarOp($seleccionado)){
$conexion = conectar();
$sql = "SELECT idPoblacion, nombre,comunidadAut FROM POBLACION WHERE id_pais='".$seleccionado."'";
if($resultado = $conexion -> query($sql)){
echo '<select name="'.$destino.'" id="'.$destino.'" onChange="cargarContenido(this.id)">';
echo '<option value="0">Elige</option>';
while($fila = mysqli_fetch_array($resultado)){
//$fila[0] = htmlentities($fila[0]);
echo "<option value='".$fila[0]."'>".$fila[1]." - ".$fila[2]."<option>";
}
}
}
?>
</div>
