He programado un formulario con muchos campos que debo ingresar a una base de datos en MySql; pero es necesario seleccionar Departamento, Provincia, Distrito y Establecimiento.
Sé que tengo que hacerlo con AJAX, he leido los scripts de califa010 que están muy bien hecho para 3 combos dependientes (combos.php y cargarDatos.php); esto me funciona bien ya los probé, también he leído a Znet, comprendo lo que dice pero no se donde están los scripts.
Bueno amigos del foro espero me puedan dar una mano con esto de los combos anidados ó dependientes.
Dejo el modificado en los scripts de califa010 combos.php, tambien he incluido establecimiento en CargarDatos.php
Gracias de antemano.
Su amigo del foro pamr22
combos.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="JavaScript">
var conexion;
var xml;
var debugFlag = true;
function actualizarProvincias() {
var idPais = document.getElementById('pais').value;
cargarDatos(idPais);
}
function actualizarMunicipios() {
var idPais = document.getElementById('pais').value;
var idProvincia = document.getElementById('provincia').value;
cargarDatos(idPais,idProvincia);
}
function actualizarEstablecimientos() {
var idPais = document.getElementById('pais').value;
var idProvincia = document.getElementById('provincia').value;
var idMunicipio = document.getElementById('municipio').value;
cargarDatos(idPais,idProvincia,idMunicipio);
}
function cargarDatos(idPais,idProvincia,idMunicipio) {
var url = "cargarDatos.php";
if (idPais != null) {
url += "?cod_dpto="+idPais;
}
if (idProvincia != null) {
url += "&cod_prov="+idProvincia;
}
if (idMunicipio != null) {
url += "&cod_dist="+idMunicipio;
}
conexion = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest) {
try {
conexion = new XMLHttpRequest();
} catch(e) {
conexion = false;
}
// branch for IE/Windows ActiveX version
} else if(window.ActiveXObject) {
try {
conexion = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
conexion = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
conexion = false;
}
}
}
if(conexion) {
conexion.onreadystatechange = function () {
if (idProvincia == null) { // si no recibe idProvincia ==> cambió el paÃÂ*s
procesarConexion("provincia"); // ==> modificar provincias y municipios
} else { // se recibe idProvincia ==> cambió la provincia
procesarConexion("municipio"); // ==> modificar municipios
}
};
conexion.open("get", url, true);
conexion.send(null);
}
}
function procesarConexion(strNivel) {
if (conexion.readyState == 4) { // XML cargado
if (conexion.status == 200) { // XML parseado y OK
xml = conexion.responseXML;
if (debugFlag == true) {
document.getElementById('debug').style.visibility = "visible";
debug();
}
armarPais(); // armar paises
if (strNivel == "provincia") { // cambió el paÃÂ*s ==> modificar provs y municipios
armarProvincia(true); // ==> armar provincias y resetear
armarMunicipio(true); // ==> armar municipios y resetear
armarEstablecimiento(true) // ==> armar establecimientos y resetear
} else if (strNivel == "municipio") { // cambió la provincia ==> modificar municipios
armarProvincia(false); // ==> armar provincia, pero NO resetear
armarMunicipio(true); // ==> armar municipios y resetear
armarEstablecimiento(true)
}
} else {
alert("Problema cargando el XML:\n" + conexion.statusText);
}
}
}
function armarPais() {
var auxPais = document.getElementById('pais');
var dpto = xml.getElementsByTagName('dpto')[0];
var cantPaises = dpto.childNodes.length;
var paisActual = auxPais.value;
auxPais.options.length = cantPaises;
if (cantPaises != 0) {
for (var i=0;i<cantPaises;i++) {
auxPais.options[i].value = dpto.childNodes[i].getAttribute('id');
auxPais.options[i].text = dpto.childNodes[i].getAttribute('nombre');
if (auxPais.options[i].value == paisActual) {// paisActual) {
auxPais.options[i].selected = true;
}
}
}
}
function armarProvincia(resetear) {
var auxProvincia = document.getElementById('provincia');
var prov = xml.getElementsByTagName('prov')[0];
var cantProvincias = prov.childNodes.length;
var provinciaActual = auxProvincia.value;
auxProvincia.options.length = cantProvincias;
if (cantProvincias != 0) {
for (var j=0;j<cantProvincias;j++) {
auxProvincia.options[j].value = prov.childNodes[j].getAttribute('id');
auxProvincia.options[j].text = prov.childNodes[j].getAttribute('nombre');
if (auxProvincia.options[j].value == provinciaActual && resetear == false) {
auxProvincia.options[j].selected = true;
}
}
if (resetear == true) {
auxProvincia.options[0].selected = true;
}
}
}
function armarMunicipio(resetear) {
var auxMunicipio = document.getElementById('municipio');
var dist = xml.getElementsByTagName('dist')[0];
var cantMunicipios = dist.childNodes.length;
var municipioActual = auxMunicipio.value;
auxMunicipio.options.length = cantMunicipios;
if (cantMunicipios != 0) {
for (var k=0;k<cantMunicipios;k++) {
auxMunicipio.options[k].value = dist.childNodes[k].getAttribute('id');
auxMunicipio.options[k].text = dist.childNodes[k].getAttribute('nombre');
if (auxMunicipio.options[k].value == municipioActual && resetear == false) {
auxMunicipio.options[k].selected = true;
}
}
if (resetear == true) {
auxMunicipio.options[0].selected = true;
}
}
}
function armarEstablecimiento(resetear) {
var auxEstablecimiento = document.getElementById('establecimiento');
var establec = xml.getElementsByTagName('establec')[0];
var cantEstablecimientos = establec.childNodes.length;
var establecimientoActual = auxEstablecimiento.value;
auxEstablecimiento.options.length = cantEstablecimientos;
if (cantEstablecimientos != 0) {
for (var m=0;m<cantEstablecimientos;m++) {
auxEstablecimiento.options[m].value = establec.childNodes[m].getAttribute('id');
auxEstablecimiento.options[m].text = establec.childNodes[m].getAttribute('nombre');
if (auxEstablecimiento.options[m].value == establecimientoActual && resetear == false) {
auxEstablecimiento.options[m].selected = true;
}
}
if (resetear == true) {
auxEstablecimiento.options[0].selected = true;
}
}
}
function debug() {
strDebug = "";
var dpto = xml.getElementsByTagName('dpto')[0];
var prov = xml.getElementsByTagName('prov')[0];
var dist = xml.getElementsByTagName('dist')[0];
var establec = xml.getElementsByTagName('establec')[0];
for (var i=0;i<dpto.childNodes.length;i++) {
strDebug += "<pais id='"+dpto.childNodes[i].getAttribute('id')+"' ";
strDebug += "nombre='"+dpto.childNodes[i].getAttribute('nombre')+"'>\n";
}
strDebug += "\n";
for (var j=0;j<prov.childNodes.length;j++) {
strDebug += "<provincia id='"+prov.childNodes[j].getAttribute('id')+"' ";//attributes['id'].value+"' ";
strDebug += "nombre='"+prov.childNodes[j].getAttribute('nombre')+"'>\n";
}
strDebug += "\n";
for (var k=0;k<dist.childNodes.length;k++) {
strDebug += "<municipio id='"+dist.childNodes[k].getAttribute('id')+"' ";
strDebug += "nombre='"+dist.childNodes[k].getAttribute('nombre')+"'>\n";
}
strDebug += "\n";
for (var m=0;m<establec.childNodes.length;m++) {
strDebug += "<establecimiento id='"+establec.childNodes[m].getAttribute('id')+"' ";
strDebug += "nombre='"+establec.childNodes[m].getAttribute('nombre')+"'>\n";
}
var debug = document.getElementById('debug');
debug.value = strDebug;
}
</script>
<style type="text/css">
div.combo select {
width:150px;
}
</style>
</head>
<center>
<table border="1" width="600px" style="border-style:none;">
<body onLoad="cargarDatos(1);"> <!-- inicializar; pasa id_pais -->
<form name="frm" method="post" action="ingresar.php">
<div class="combo">
<select id="pais" name="pais" onChange="actualizarProvincias()"></select>
<select id="provincia" name="provincia" onChange="actualizarMunicipios()"></select>
<select id="municipio" name="municipio" onChange="actualizarEstablecimientos"></select>
<select id="establecimiento" name="establecimiento" onChange=""></select>
<p><input type="submit" value="Ingresar"></p>
</div>
</form>
<textarea style="width:600px; visibility:hidden" rows="16" id="debug"></textarea>
</table>
</center>
</body>
</html>
Mis correos:
[email protected]
[email protected]
[email protected]
Este tema le ha gustado a 1 personas (incluyéndote)