Como mostrar los registros de una tabla con Select Dependientes con php y ajax

[programador independiente]

Buenas tardes Amigos.

Antes que todo reciban un agradecimiento por tomarse el tiempo de leer esta Consulta y por ayudarme, Dios les Bendiga.

Mi Consulta es la siguiente:

Estoy adentrándome en la programación de PHP y MySQL, tengo 2 semanas buscando ayuda de como realizar un buscador multicriterios, al no poder obtener ayuda me decidí a comenzar a estudiar programación PHP, pero me urge realizar un buscador multicriterios.

Por lo pronto me encontré con un código en la web hecho en ajax, que me serviría muy bien mientras aprendo a hacer un buscador multicriterios, aquí dejo el enlace por si alguien necesita algo parecido: http://www.formatoweb.com.ar/ajax/select_dependientes.php

Me funciona bien, al elegir en el primer Select un país por ejemplo: "Argentina" se carga perfectamente el segundo Select (el cual es dependiente del primero) con la lista de los estados pertenecientes a "Argentina" hasta aquí todo bien; ahora bien, originalmente quien realizó este trabajo creó una base de datos llamada ajax con 2 tablas la 1era tabla llamada "lista_paises" y la 2da tabla llamada "lista_estados" relacionadas entre sí, ahora yo creé una tercer tabla llamada "Direcciones" y dentro de ella tengo 5 campos: id, ciudad, dirección, colonia, teléfono.

Entonces la cuestión es ¿Cómo hago para que al seleccionar en el segundo Select la opción "Buenos Aires" o cualquier otra ciudad me muestre en la pantalla los registros que pertenezcan a dicha ciudad los cuales se encuentran en la tabla llamada "Direcciones"?

Muchas gracias, espero haberme explicado con claridad y que me puedan echar una mano, ya que llevo 2 semanas tratando de resolver este conflicto.

[Ogramar]

Hola, por lo que te he entendido pretendes elegir distintos criterios y que se haga una búsqueda teniendo en cuenta lo que ha elegido el usuario en cada caso.

Para eso necesitas

- Un formulario (conocimientos: HTML)

- Una página que rescate los criterios definidos por el usuario (conocimientos: PHP)

- Una consulta a la base de datos teniendo en cuenta los criterios elegidos por el usuario (conocimientos PHP + MySql)

Aquí tienes cursos donde obtener información:

HTML: http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

PHP + MySql : http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=70&Itemid=193

El paso final o consulta a la base de datos tendrá que tener en cuenta la elección del usuario.

En la tabla "Direcciones" necesitarás además de id, ciudad, dirección, colonia, teléfono un campo como id_estado ó estado que referencie a la tabla de estados. Y en base a eso hacer una consulta tipo:

"SELECT ciudad
FROM Direcciones WHERE estado='".$estado."'
ORDER BY id DESC
LIMIT 2000 "

Con esto obtendrías la información de las ciudades que pertenezcan al estado seleccionado.

"SELECT *
FROM Direcciones WHERE ciudad='".$ciudad."'
ORDER BY id DESC
LIMIT 2000 "

Te daría la información sobre las direcciones que pertenecen a la ciudad.

En la tabla Direcciones necesitas algo que te permita saber en qué estado está la ciudad, si no no podrías hacer la búsqueda.

Si tienes código pégalo usando el botón # del foro insertando el código entre [ code ] y [ / code], o adjunta los archivos indicando el punto exacto donde tienes el problema, de esa forma es más fácil revisar.

Saludos

[programador independiente]

Gracias a Dios y a ti que respondiste a mi auxilio, he colgado este mismo mensaje como en 7 foros de paginas distintas y nadie me había respondido hasta ahora.

Estoy totalmente de acuerdo contigo y convencido de que tengo que enseñarme a programar php y a manejar bases de datos, ya en lo que respecta a html y ccs, tengo conocimientos medios de esto, gracias por los tutoriales que me dejas en tu mensaje, los seguiré paso a paso.

Aquí esta el código que me descargué de la web, dejo el link: http://www.formatoweb.com.ar/ajax/select_dependientes.php, incluso ahí viene una demo en línea y los archivos te los puedes descargar de ahí mismo, son 3 archivos php y 1 en js además del CSS y la base de datos.

archivo 1 llamado: conexion.php

Código: [Seleccionar]

<?php
function conectar()
{
mysql_connect("localhost", "root", "");
mysql_select_db("ajax");
}

function desconectar()
{
mysql_close();
}
?>
archivo 2 llamado: select_dependientes.php

Código: [Seleccionar]

<?php
function generaPaises()
{
include 'conexion.php';
conectar();
$consulta=mysql_query("SELECT id, opcion FROM lista_paises");
desconectar();

// Voy imprimiendo el primer select compuesto por los paises
echo "<select name='paises' id='paises' onChange='cargaContenido(this.id)'>";
echo "<option value='0'>Elige</option>";
while($registro=mysql_fetch_row($consulta))
{
echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
}
echo "</select>";
}
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!--



Este contenido es de libre uso y modificación bajo la siguiente licencia: http://creativecommons.org/licenses/by-nc-sa/2.5/deed.es

Sobre el reconocimiento:
Todos los códigos han sido realizados con la idea de que sirvan para colaborar con el aprendizage de aquellos que se están introduciendo
en estas tecnologías y no con el objetivo de que sean utilizados directamente en sitios web. No obstante si utilizas algún código en tu sitio
(ya sea sin modificar o modificado), o si ofreces los fuentes para descargar o si bien decides publicar alguno de los artículos debes cumplir con:
-Colocar un link a http://www.formatoweb.com.ar/ajax/ visible por tus usuarios como forma de mención a la fuente original del contenido.
-Enviar un correo a edanps@gmail.com informando la URL donde el contenido se ha publicado o se va a publicar en un futuro.
-Si publicas los fuentes para descargar este texto no debe ser eliminado ni alterado.

Más ejemplos y material sobre AJAX en: http://www.formatoweb.com.ar/ajax/
Cualquier sugerencia, crítica o comentario son bienvenidos.
Contacto: edanps@gmail.com



-->

<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>AJAX, Ejemplos: Combos (select) dependientes, codigo fuente - ejemplo</title>
<link rel="stylesheet" type="text/css" href="select_dependientes.css">
<script type="text/javascript" src="select_dependientes.js"></script>
</head>

<body>

<div id="demo" style="width:600px;">
<div id="demoDer">
<select disabled="disabled" name="estados" id="estados">
<option value="0">Selecciona opci&oacute;n...</option>
</select>
</div>
<div id="demoIzq"><?php generaPaises(); ?></div>
</div>

</body>
</html>
archivo 3 llamado: select_dependientes_proceso.php

Código: [Seleccionar]

<?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"
);

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 'conexion.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>";
}
?>
archivo 4 llamado: select_dependientes.js

Código: [Seleccionar]

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)
{
if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
}
}
return xmlhttp;
}

// Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
var listadoSelects=new Array();
listadoSelects[0]="paises";
listadoSelects[1]="estados";

function buscarEnArray(array, dato)
{
// Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra
var x=0;
while(array[x])
{
if(array[x]==dato) return x;
x++;
}
return null;
}

function cargaContenido(idSelectOrigen)
{
// Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
// Obtengo el select que el usuario modifico
var selectOrigen=document.getElementById(idSelectOrigen);
// Obtengo la opcion que el usuario selecciono
var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
// Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."
if(opcionSeleccionada==0)
{
var x=posicionSelectDestino, selectActual=null;
// Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
while(listadoSelects[x])
{
selectActual=document.getElementById(listadoSelects[x]);
selectActual.length=0;

var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opción...";
selectActual.appendChild(nuevaOpcion); selectActual.disabled=true;
x++;
}
}
// Compruebo que el select modificado no sea el ultimo de la cadena
else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
{
// Obtengo el elemento del select que debo cargar
var idSelectDestino=listadoSelects[posicionSelectDestino];
var selectDestino=document.getElementById(idSelectDestino);
// Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
var ajax=nuevoAjax();
ajax.open("GET", "select_dependientes_proceso.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==1)
{
// Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
selectDestino.length=0;
var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;
}
if (ajax.readyState==4)
{
selectDestino.parentNode.innerHTML=ajax.responseText;
}
}
ajax.send(null);
}
}
Este es todo el código. Mi problema es que no sé cómo seguirle al paso siguiente, en resumen lo que deseo es esto:

en select paises elegir por ejemplo "Argentina" y el segundo select se llena automaticamente con los estados de este país y si yo elijo por ejemplo "Buenos Aires" me arroje en pantalla, las direcciones que pertenezcan a esta ciudad por ejemplo:

en la tercer tabla creada por mi tengo 5 campos y ahora mismo le he agregado el id_estado que me has indicado entonces queda así:

id  ciudad             direccion       colonia      telefono  id_estado
1  buenos aires   calle y num    colonia x   tel x          1
2 capital federal  calle y num    colonia x   tel x          1

en id_estado coloqué 1 por que las 2 ciudades del ejemplo pertenecen al pais "argentina" y Argentina es el 1 en la tabla de países, ¿es correcto o estoy en un error?

ahora bien al elegir en el segundo select "buenos aires", quiero que me de en pantalla los campos: "ciudad, direccion, colonia, y telefono" sólo de "buenos aires" y en este ejemplo la búsqueda me descriminaría los datos de "capital federal" y me mostraría los datos de buenos aires", eso es lo que me falta por realizar.

Muchas gracias por todo amigo y estaré al pendiente de tus respuestas, saludos desde México y que Dios te conserve la salud y te bendiga siempre!!!!

[Ogramar]

Si no te he entendido mal un país se compone de estados, y un estado se compone de ciudades.

en id_estado coloqué 1 por que las 2 ciudades del ejemplo pertenecen al pais "argentina" y Argentina es el 1 en la tabla de países, ¿es correcto o estoy en un error?

Pero aquí estás diciendo que las ciudades pertenecen al país, supongo que es un error. ¿?

Lo primero que deberías hacer es plantear las consultas en mySql, para ello supongo que dispones del gestor de bases de datos MySql más habitual, phpMyAdmin, una vez logres que las consultas funcionen bien con phpMyAdmin, sería cuestión de que trasladaras eso a código. En el código tienes javascript, ajax, php y html, lo cual no es poco para abordarlo de golpe.

[programador independiente]

Saludos Amigo.

Si mira, hablé de ciudades porque no sabía que Buenos Aires o Capital Federal se le llaman Estados, pero siguiendo tus palabras es así lo que intento hacer:

primer select elijo el pais de "Argentina"
segundo select elijo el estado de "Buenos Aires"
y que me arroje en pantalla las direcciones del estado de buenos aires descriminando las direcciones pertenecientes a los demás estados.

Sé que no es fácil como bien lo dices abordar de golpe temas que involucran lenguajes que desconozco, la verdad es que fue el único código que me encontré en la red que se ajustaba a mis necesidades, aunque me gustaría hacer este traba con sólo php.

Mira te voy a comentar que es lo que estoy realizando:
Estoy haciendo una página web para una amiga que tiene una inmobiliaria, donde vende casas para el Infonavit, aqui en México, este instituto es el que se encarga de dar casas a los trabajadores registrados en el infonavit.

Bueno pues ya tengo media página hecha, pero me topé con este "muro" al querer hacer un buscador interno multicriterios, pero como lo mencioné en el primer post no obtuve información de cómo realizarlo así que me decidí por hacerlo más sencillo, de esta manera:

En México se divide así: Pais-Estados-Municipios

Mi amiga vende casas en 3 estados de México: Coahuila, Nuevo Leon, Sinaloa y dentro de cada estado hay por lo menos 20 municipios. Entonces a mi me serviría hacer un buscador con 1 sólo criterio: que me muestre las casas que hay en cada municpio, es por ello que me descargué este código hecho en php ajax y javaScript como bien lo dices.

¿Por qué me sirve este código? por que yo cambié los países por estados y los estados por municipios, quedando así:

select 1: en vez de listar Argentina, Bolivia, Brasil etc... el mío lista 3 estados que son los que necesito: Coahuila, Nuevo Leon, Sinaloa.

y automaticamente al yo elegir por ejemplo: Nuevo Leon, el select 2 se me enlista con los municipios pertenecientes al Estado de Nuevo León.

Aquí lo que me faltaría por hacer sería agregar un botón de buscar y al presionarlo me muestre en pantalla todas las direcciones que pertenecen al municipio elegido en el select 2 y eso es todo.

Te dejo el link donde estan los archivos del código modificado por mi, más mi base datos:

https://mega.co.nz/#!UI1R3LJK!7pogqC_pZUuo7jpe1R2xuY6qkdcJcAg1o_4qzKXfVDE,

En la base te darás cuenta que en la tabla "direcciones" sólo tengo las direcciones de los primeros 3 municipios del primer estado, es decir:

Estado: Coahuila (primer select)
Municipios de Coahuila: Abasolo, Allende, Frontera (segundo select)
y a cada municipio le puse 3 direcciones, 9 en total, que son las que se deberían de ver en pantalla.

Una pregunta, ¿Crees que con sólo PHP y MySQL además de HTML podría hacer un buscador así o por fuerza tengo que involucrar ajax y javaScript?

Por cierto, si tengo instalado el wampserver y uso la base de datos del phpMyadmin.

Gracias por tus respuestas, Dios te bendiga y te conserve la salud!!!

[Ogramar]

¿Crees que con sólo PHP y MySQL además de HTML podría hacer un buscador así o por fuerza tengo que involucrar ajax y javaScript?

Lo puedes hacer sólo con HTML, PHP, MySQl. La diferencia está en cómo se produce la carga de las nuevas opciones una vez eliges la primera. Con JavaScript esta carga se tiene que producir en el cliente, con Ajax se produce en el servidor de forma asíncrona y con Php se tiene que recargar la página una vez introduces la opción.

Si sólo te falta el botón buscar, tendrías que añadirlo enviando al usuario a una página de resultados. Para eso tienes que saber crear el formulario y hacer la consulta php. Consulta en este curso porque tienes explicaciones de formularios y de consultas a bases de datos: http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=70&Itemid=193

Saludos

[programador independiente]

Que tal amigo!!

Muchas gracias por tu orientación, me ha servido bastante, he comenzado con los cursos que me has apuntado en tus respuestas, espero pronto profundizar en conocimiento y cuando resuelva el cómo hacer el buscador, por supuesto regresaré a este apartado y pegaré el código, tal vez a alguien en el futuro le sirva.

Gracias por todo, Dios te Bendiga y te Conserve la Salud!!!