combobox dependientes con php y ajax

fernandaYO · #1 (**permalink**) 07/07/2011, 08:14

Hola!
No tengo ni idea de ajax.. empezando, pero me dijeron que para el combobox que debo hacer necesito ajax, si alguien me pudiese dar una idea de como es el codigo para esto, indicandome almenos alguna de sus partes le agradeceria infinitamente y le pondria todos los karmas qeu quiera.. jejej .. buen.. porfa sera que alguien me puede ayudar?

Son solo 2
El primero es Cliente y el segundo es Fecha, ambos estan en una misma tabla en la base de datos, es eso algun impedimento?

Melecio · #2 (**permalink**) 07/07/2011, 08:23

hay te va ub ejemplo esta largo y espero que te sirva yo utilizo 3 combobox chekalo
------------------------------------
ajax.php
---------------
<?php include "conexion.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=iso-8859-1" />
<title>Documento sin título</title>
</head>
<script>
//hacer que funcione con diferentes navegadores
function requerir(){
try{
req=new XMLHttpRequest();
}catch(err1){
try{
req=new ActiveXObject("Microsoft.XMLHTTP");
}catch(err2){
try{
req=new ActiveXObject("Msxml2.XMLHTTP");
}catch(err3){
req= false;
}
}
}
return req;
}

var peticion=requerir();

function llamarAjaxGETpro(){
var aleatorio=parseInt(Math.random()*999999999);
valor=document.getElementById("departamento").valu e;
var url="provincia.php?valor="+valor+"&r="+aleatorio;
peticion.open("GET",url,true);
peticion.onreadystatechange =respuestaAjaxpro;
peticion.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
peticion.send(null);
}

function llamarAjaxGETdis(){
var aleatorio=parseInt(Math.random()*999999999);
valor=document.getElementById("provincia").value;
var url="distrito.php?valor="+valor+"&r="+aleatorio;
peticion.open("GET",url,true);
peticion.onreadystatechange =respuestaAjaxdis;
peticion.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
peticion.send(null);
}

function respuestaAjaxpro(){

if(peticion.readyState==4){
if(peticion.status==200){
//alert(peticion.responseText);
document.getElementById("pro").innerHTML=peticion. responseText;
}else{
alert("ha ocurrido un error"+peticion.statusText);
}
}
}
function respuestaAjaxdis(){

if(peticion.readyState==4){
if(peticion.status==200){
//alert(peticion.responseText);
document.getElementById("dis").innerHTML=peticion. responseText;
}else{
alert("ha ocurrido un error"+peticion.statusText);
}
}
}

</script>

<body>
<form action="" method="post" enctype="application/x-www-form-urlencoded" name="form1" id="form1">
<div id="dep" style="width:150px; float:left">
<select name="departamento" id="departamento" onchange="llamarAjaxGETpro()">
<option>seleccione depart.</option>
<?php
$re=mysql_query("select * from tb_departamento");
while($f=mysql_fetch_array($re)){
echo'<option value="'.$f['id_dep'].'">'.$f['det_dep'].'</option>';
}
?>
</select>
</div>
<div id="pro" style="width:150px; float:left">
<select disabled="disabled">
<option>seleccione provincia</option>
</select>
</div>
<div id="dis" style="width:150px; float:left">
<select name="select3" id="select3" disabled="disabled">
<option>seleccione distrito</option>
</select>
</div>
</form>

</body>
</html>

conexion.php
------------------------
<?php
mysql_connect("localhost","root","")or die(mysql_error());
mysql_select_db("test")or die(mysql_error());
?>

distrito.php
---------------------------
<?php
include "conexion.php";
$valor=$_GET['valor'];
$re=mysql_query("select * from tb_distrito where id_pro='$valor' ");
echo'<select id="distrito" >';
echo'<option >seleccione distrito</option>';
while($f=mysql_fetch_array($re)){
echo'<option value="'.$f['id_dis'].'">'.$f['det_dis'].'</option>';
}
echo'</select>';
?>

provincia.php

-------------

<?php
include "conexion.php";
$valor=$_GET['valor'];
$re=mysql_query("select * from tb_provincia where id_dep='$valor' ");
echo'<select id="provincia" onchange=llamarAjaxGETdis()>';
echo'<option >seleccione provincia</option>';
while($f=mysql_fetch_array($re)){
echo'<option value="'.$f['id_pro'].'">'.$f['det_pro'].'</option>';
}

echo'</select>';
?>

bd test
---------------
Navicat MySQL Data Transfer

Source Server : localhost_3306
Source Server Version : 50508
Source Host : localhost:3306
Source Database : test

Target Server Type : MYSQL
Target Server Version : 50508
File Encoding : 65001

Date: 2011-03-20 19:43:49
*/

SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `tb_departamento`
-- ----------------------------
DROP TABLE IF EXISTS `tb_departamento`;
CREATE TABLE `tb_departamento` (
`id_dep` varchar(2) NOT NULL DEFAULT '',
`det_dep` varchar(50) DEFAULT NULL,
PRIMARY KEY (`id_dep`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of tb_departamento
-- ----------------------------
INSERT INTO `tb_departamento` VALUES ('1', 'dep1');
INSERT INTO `tb_departamento` VALUES ('2', 'dep2');

-- ----------------------------
-- Table structure for `tb_distrito`
-- ----------------------------
DROP TABLE IF EXISTS `tb_distrito`;
CREATE TABLE `tb_distrito` (
`id_pro` int(3) DEFAULT NULL,
`id_dis` int(3) NOT NULL,
`det_dis` varchar(50) DEFAULT NULL,
PRIMARY KEY (`id_dis`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of tb_distrito
-- ----------------------------
INSERT INTO `tb_distrito` VALUES ('1', '1', 'dis1');
INSERT INTO `tb_distrito` VALUES ('1', '2', 'dis2');
INSERT INTO `tb_distrito` VALUES ('2', '3', 'dis3');
INSERT INTO `tb_distrito` VALUES ('2', '4', 'dis4');
INSERT INTO `tb_distrito` VALUES ('3', '5', 'dis5');
INSERT INTO `tb_distrito` VALUES ('3', '6', 'dis6');
INSERT INTO `tb_distrito` VALUES ('4', '7', 'dis7');
INSERT INTO `tb_distrito` VALUES ('4', '8', 'dis8');

-- ----------------------------
-- Table structure for `tb_provincia`
-- ----------------------------
DROP TABLE IF EXISTS `tb_provincia`;
CREATE TABLE `tb_provincia` (
`id_dep` int(3) DEFAULT NULL,
`id_pro` int(3) NOT NULL DEFAULT '0',
`det_pro` varchar(50) DEFAULT NULL,
PRIMARY KEY (`id_pro`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of tb_provincia
-- ----------------------------
INSERT INTO `tb_provincia` VALUES ('1', '1', 'pro1');
INSERT INTO `tb_provincia` VALUES ('1', '2', 'pro2');
INSERT INTO `tb_provincia` VALUES ('2', '3', 'pro3');
INSERT INTO `tb_provincia` VALUES ('2', '4', 'pro4');

fernandaYO · #3 (**permalink**) 07/07/2011, 08:53

Cita:

Iniciado por Melecio

hay te va ub ejemplo esta largo y espero que te sirva yo utilizo 3 combobox chekalo
------------------------------------
ajax.php
---------------
<?php include "conexion.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=iso-8859-1" />
<title>Documento sin título</title>
</head>
<script>
//hacer que funcione con diferentes navegadores
function requerir(){
try{
req=new XMLHttpRequest();
}catch(err1){
try{
req=new ActiveXObject("Microsoft.XMLHTTP");
}catch(err2){
try{
req=new ActiveXObject("Msxml2.XMLHTTP");
}catch(err3){
req= false;
}
}
}
return req;
}

var peticion=requerir();

function llamarAjaxGETpro(){
var aleatorio=parseInt(Math.random()*999999999);
valor=document.getElementById("departamento").valu e;
var url="provincia.php?valor="+valor+"&r="+aleatorio;
peticion.open("GET",url,true);
peticion.onreadystatechange =respuestaAjaxpro;
peticion.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
peticion.send(null);
}

function llamarAjaxGETdis(){
var aleatorio=parseInt(Math.random()*999999999);
valor=document.getElementById("provincia").value;
var url="distrito.php?valor="+valor+"&r="+aleatorio;
peticion.open("GET",url,true);
peticion.onreadystatechange =respuestaAjaxdis;
peticion.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
peticion.send(null);
}

function respuestaAjaxpro(){

if(peticion.readyState==4){
if(peticion.status==200){
//alert(peticion.responseText);
document.getElementById("pro").innerHTML=peticion. responseText;
}else{
alert("ha ocurrido un error"+peticion.statusText);
}
}
}
function respuestaAjaxdis(){

if(peticion.readyState==4){
if(peticion.status==200){
//alert(peticion.responseText);
document.getElementById("dis").innerHTML=peticion. responseText;
}else{
alert("ha ocurrido un error"+peticion.statusText);
}
}
}

</script>

<body>
<form action="" method="post" enctype="application/x-www-form-urlencoded" name="form1" id="form1">
<div id="dep" style="width:150px; float:left">
<select name="departamento" id="departamento" onchange="llamarAjaxGETpro()">
<option>seleccione depart.</option>
<?php
$re=mysql_query("select * from tb_departamento");
while($f=mysql_fetch_array($re)){
echo'<option value="'.$f['id_dep'].'">'.$f['det_dep'].'</option>';
}
?>
</select>
</div>
<div id="pro" style="width:150px; float:left">
<select disabled="disabled">
<option>seleccione provincia</option>
</select>
</div>
<div id="dis" style="width:150px; float:left">
<select name="select3" id="select3" disabled="disabled">
<option>seleccione distrito</option>
</select>
</div>
</form>

</body>
</html>

conexion.php
------------------------
<?php
mysql_connect("localhost","root","")or die(mysql_error());
mysql_select_db("test")or die(mysql_error());
?>

distrito.php
---------------------------
<?php
include "conexion.php";
$valor=$_GET['valor'];
$re=mysql_query("select * from tb_distrito where id_pro='$valor' ");
echo'<select id="distrito" >';
echo'<option >seleccione distrito</option>';
while($f=mysql_fetch_array($re)){
echo'<option value="'.$f['id_dis'].'">'.$f['det_dis'].'</option>';
}
echo'</select>';
?>

provincia.php

-------------

<?php
include "conexion.php";
$valor=$_GET['valor'];
$re=mysql_query("select * from tb_provincia where id_dep='$valor' ");
echo'<select id="provincia" onchange=llamarAjaxGETdis()>';
echo'<option >seleccione provincia</option>';
while($f=mysql_fetch_array($re)){
echo'<option value="'.$f['id_pro'].'">'.$f['det_pro'].'</option>';
}

echo'</select>';
?>

bd test
---------------
Navicat MySQL Data Transfer

Source Server : localhost_3306
Source Server Version : 50508
Source Host : localhost:3306
Source Database : test

Target Server Type : MYSQL
Target Server Version : 50508
File Encoding : 65001

Date: 2011-03-20 19:43:49
*/

SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `tb_departamento`
-- ----------------------------
DROP TABLE IF EXISTS `tb_departamento`;
CREATE TABLE `tb_departamento` (
`id_dep` varchar(2) NOT NULL DEFAULT '',
`det_dep` varchar(50) DEFAULT NULL,
PRIMARY KEY (`id_dep`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of tb_departamento
-- ----------------------------
INSERT INTO `tb_departamento` VALUES ('1', 'dep1');
INSERT INTO `tb_departamento` VALUES ('2', 'dep2');

-- ----------------------------
-- Table structure for `tb_distrito`
-- ----------------------------
DROP TABLE IF EXISTS `tb_distrito`;
CREATE TABLE `tb_distrito` (
`id_pro` int(3) DEFAULT NULL,
`id_dis` int(3) NOT NULL,
`det_dis` varchar(50) DEFAULT NULL,
PRIMARY KEY (`id_dis`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of tb_distrito
-- ----------------------------
INSERT INTO `tb_distrito` VALUES ('1', '1', 'dis1');
INSERT INTO `tb_distrito` VALUES ('1', '2', 'dis2');
INSERT INTO `tb_distrito` VALUES ('2', '3', 'dis3');
INSERT INTO `tb_distrito` VALUES ('2', '4', 'dis4');
INSERT INTO `tb_distrito` VALUES ('3', '5', 'dis5');
INSERT INTO `tb_distrito` VALUES ('3', '6', 'dis6');
INSERT INTO `tb_distrito` VALUES ('4', '7', 'dis7');
INSERT INTO `tb_distrito` VALUES ('4', '8', 'dis8');

-- ----------------------------
-- Table structure for `tb_provincia`
-- ----------------------------
DROP TABLE IF EXISTS `tb_provincia`;
CREATE TABLE `tb_provincia` (
`id_dep` int(3) DEFAULT NULL,
`id_pro` int(3) NOT NULL DEFAULT '0',
`det_pro` varchar(50) DEFAULT NULL,
PRIMARY KEY (`id_pro`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of tb_provincia
-- ----------------------------
INSERT INTO `tb_provincia` VALUES ('1', '1', 'pro1');
INSERT INTO `tb_provincia` VALUES ('1', '2', 'pro2');
INSERT INTO `tb_provincia` VALUES ('2', '3', 'pro3');
INSERT INTO `tb_provincia` VALUES ('2', '4', 'pro4');

Gracias por tu pronta respuesta!

pero me gustaria que me instruyeras un poco, por que con esto no sabria que cambiar ni nada, me facilito un poco, por ejemplo:
var url="provincia.php?valor="+valor+"&r="+aleatorio; el provincia.php, pues es un archivo php, pero que debe tener? o solo lo esta creando

Cita:

if(peticion.readyState==4){
if(peticion.status==200){

qeu significa el 4 y el 200? para que?

es todo

Melecio · #4 (**permalink**) 07/07/2011, 09:20

Cita:

Iniciado por fernandaYO

Gracias por tu pronta respuesta!

pero me gustaria que me instruyeras un poco, por que con esto no sabria que cambiar ni nada, me facilito un poco, por ejemplo:
var url="provincia.php?valor="+valor+"&r="+aleatorio; el provincia.php, pues es un archivo php, pero que debe tener? o solo lo esta creando

qeu significa el 4 y el 200? para que?

es todo

ok te explicare como funciona

empezemos por tu duda
el 4 y el 200 son para el estado de la pagina
el 4 es para completado y el 200 para ok

bueno si no sabes ayax es para que no tengas que actualizar ni cambiar de url

a esto se le llama asincrono es decir que no cambia de lugar

emezemos desde el principio

la funcion requerir() = esto es para crear el objeto ajax porque no todos los navegadores son compatibles entonces para eso es esta funcion para crear el objeto segun el navegador que usus ok ........

una ves que se creo el objeto se guardara automaticamente en la funcion requerir()

cuando acaba esta funcion haremos lo siguiente

var peticion=requerir();
esto es para igualar la variable peticion a el objeto que creamos

llamarAjaxGETpro()
esta funcion es para el proceso que hara nuestro proyecto

el envio y la obtencion de los datos por url ok el cual estaremos enviando valeres y resiviremos respuesta de provincia.php

haora si analizastes el codigo de provincia.php lo que hara es crear las opciones deacuerdo a la opcion que elegistes en el primer combobox ok

es decir te enviara los datos de labase de datos y creara las opciones del combobox

lo mismo hara la funcion llamarAjaxGETdis que este se comunicara al archivo php distrito ok
tambien nos enviara los datos de la base de datos y creara lo que son las opciones en el combobox

y por ultimo la funcion respuestaAjaxpro() es para el estado de la pagina es decir si lapagina esta en "completado" = 4 y "ok" = 200 entonces

el codigo

peticion. responseText = respuesta de los archivos

y estohace referencia a los dos ultimos combobox es para crear las opciones de menu segun la base de datos
document.getElementById("pro").innerHTML=peticion. responseText;

document.getElementById("dis").innerHTML=peticion. responseText;

ok eso es todo espero y me explicara bien...

fernandaYO · #5 (**permalink**) 07/07/2011, 09:58

Si, muchas cosas me qeudaron claras, ahora, je

donde pongo lo de la organizacion de las tablas..? mi pregunta en si es, tengo que crear tabla diferente para cada cosa?

Melecio · #6 (**permalink**) 07/07/2011, 10:25

Cita:

Iniciado por fernandaYO

Si, muchas cosas me qeudaron claras, ahora, je

donde pongo lo de la organizacion de las tablas..? mi pregunta en si es, tengo que crear tabla diferente para cada cosa?

la tabla es un ejemplo pero si tienes wamp server tienes que crearla en phpmyadmin

esta base de datos si la copeas y la pegas en phpmyadmin no te funcionara debes crearla

fernandaYO · #7 (**permalink**) 07/07/2011, 10:34

ah ok! o sea que la que tengo no me sirve!

Melecio · #8 (**permalink**) 07/07/2011, 10:39

copea esto y pegalo en phpmyadmin de wampserver

esto guardalo en un blok de notas cmo test.sql
-- phpMyAdmin SQL Dump
-- version 2.10.1
-- http://www.phpmyadmin.net
--
-- Servidor: localhost
-- Tiempo de generación: 07-07-2011 a las 11:39:28
-- Versión del servidor: 5.0.37
-- Versión de PHP: 5.2.2

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- Base de datos: `test`
--

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `tb_departamento`
--

CREATE TABLE `tb_departamento` (
`id_dep` int(11) NOT NULL auto_increment,
`det_dep` varchar(50) NOT NULL,
PRIMARY KEY (`id_dep`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Volcar la base de datos para la tabla `tb_departamento`
--

INSERT INTO `tb_departamento` (`id_dep`, `det_dep`) VALUES
(1, 'dep1'),
(2, 'dep2');

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `tb_distrito`
--

CREATE TABLE `tb_distrito` (
`id_pro` varchar(50) NOT NULL,
`id_dis` int(11) NOT NULL auto_increment,
`det_dis` varchar(50) NOT NULL,
PRIMARY KEY (`id_dis`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;

--
-- Volcar la base de datos para la tabla `tb_distrito`
--

INSERT INTO `tb_distrito` (`id_pro`, `id_dis`, `det_dis`) VALUES
('1', 1, 'dis1'),
('1', 2, 'dis2'),
('2', 3, 'dis3'),
('2', 4, 'dis4'),
('3', 5, 'dis5'),
('3', 6, 'dis6'),
('4', 7, 'dis7'),
('4', 8, 'dis8');

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `tb_provincia`
--

CREATE TABLE `tb_provincia` (
`id_dep` varchar(50) NOT NULL,
`id_pro` int(11) NOT NULL auto_increment,
`det_pro` varchar(50) NOT NULL,
PRIMARY KEY (`id_pro`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Volcar la base de datos para la tabla `tb_provincia`
--

INSERT INTO `tb_provincia` (`id_dep`, `id_pro`, `det_pro`) VALUES
('1', 1, 'pro1'),
('1', 2, 'pro2'),
('2', 3, 'pro3'),
('2', 4, 'pro4');

fernandaYO · #9 (**permalink**) 07/07/2011, 13:05

Muchas Gracias !!! si me sirvio!

Melecio · #10 (**permalink**) 07/07/2011, 14:50

Cita:

Iniciado por fernandaYO

Muchas Gracias !!! si me sirvio!

ok gusto en ayudarte y si posteas otra cosa tratare de ayudarte gracias por el karma bye..

erio · #11 (**permalink**) 01/09/2011, 10:10

Hola he copiado el codigo tal y como esta y no me recarga los datos del segundo ¿seguro que esta bien?

Ximenitaa · #12 (**permalink**) 02/09/2011, 10:02

Hola !!!

Hay bastantes ejemplos de como hacer combos dependientes en la web, y algunos claros que te dicen paso a paso, aunque a veces si se llega a complicar ...

he aqui unos ejemplos:

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

http://www.xajax-project.org/en/home/

http://www.xajax-project.org/en/docs...in-10-minutes/

http://www.formatoweb.com.ar/blog/20...es-multinivel/

http://pixelar.me/selects-dependientes-con-jquery/

este es el que mas le he entendido http://enterx.wordpress.com/2009/11/...n-jquery-ajax/

y por si quieren leer un poco mas aqui les dejo estos dos manuales ....

http://es.scribd.com/doc/86539/Ajax-Manual-Spanish

http://www.librosweb.es/ajax/pdf/introduccion_ajax.pdf

algunos de los ejemplos trae ya los datos adjuntos por si no le llegaran a entender ........
Espero les sirva del algo ......

Saludos ................

jaman · #13 (**permalink**) 12/03/2012, 09:08

Hola como están.

Que pena molestarlos pero tengo un inconveniente, para sacar las variables meterlas a mi formulario php y mandarlas a la base de datos .
si me puedes ayudar de ante mano muchas gracias.