window.addEventListener("load",cargarSelect);
var xhl;
function cargarSelect(){
//creamos el objeto XMLHttpRequest
xhl= new XMLHttpRequest();
var formu=document.createElement("form");
formu.method="POST";
formu.name="formu";
formu.id="formu";
formu.enctype="multipart/form-data";
document.body.appendChild(formu);
//pedimos el select de las comunidades
peticionComunidades();
}
function peticionComunidades(){
//añadimos el listener para gestionar los cambios en el objeto
xhl.addEventListener("readystatechange",procesarDatosComunidades);
//cargamos el fichero en este caso un servlet
xhl.open("GET","comunidadesServlet",true);
//El metodo GET manda en el enlace los datos pero en este caso no necesitamos enviar nada solo recoger
xhl.send(null);
}
function procesarDatosComunidades(evento){
var event=evento || window.event;
//comprobamos que el estado de la descarga ajax ha terminado
if(event.target.readyState ==4 ){
//creamos el select
var select=document.createElement("select");
//le damos un id para luego poder acceder a ello
select.id="comunidad";
//le añadimos los eventos al select
select.addEventListener("change",peticionProvincias);
//guardamos los resultado en una variable
var doc=xhl.responseXML;
//Al ser XML nos devolvera una serie de objetos envueltos en tagsy podemos acceder a ellos
var idComunidades=doc.getElementsByTagName("identificador");
var nomComunidades=doc.getElementsByTagName("nombre");
//recorremos los resultados y los vamos añadiendo al select
for(var i=0; i<idComunidades.length;i++){
var nodo=document.createElement("option");
nodo.value=idComunidades.item(i).firstChild.nodeValue;
nodo.innerHTML=nomComunidades.item(i).firstChild.nodeValue;
select.appendChild(nodo);
}
//añadimos al body el select
document.getElementById("formu").appendChild(select);
//removemos elevento para usar el objeto mas adelante
xhl.removeEventListener("readystatechange",procesarDatosComunidades);
}
}
function peticionProvincias(){
//deshabilitmos el select durante la creacion del select de provincias
//document.getElementById("comunidad").disabled =true;
//añadimos el listener para gestionar los cambios en el objeto
xhl.addEventListener("readystatechange",procesarDatosProvincias);
//recogemos el valor de la comunidad
var comunidad=document.getElementById("comunidad").value;
//cargamos el fichero en este caso un servlet
var datos =new FormData(document.getElementById("formu"));
xhl.open("POST","provinciasServletForm",true);
//añadimos una cabecera y un envio de parametros
xhl.setRequestHeader('Content-Type', "multipart/form-data");
xhl.send(datos);
}
function procesarDatosProvincias(evento){
var event=evento || window.event;
//comprobamos que el estado de la descarga ajax ha terminado
if(event.target.readyState ==4 && evento.target.status == 200 ){
//si existe el nodo del select primero lo borramos
if(!document.getElementById("provincias")){
//creamos el select y le damos un id por un futuro uso
var select=document.createElement("select");
select.id="provincias";
//guardamos los resultado en una variable
var doc=xhl.responseXML;
//Al ser XML nos devolvera una serie de objetos envueltos en tagsy podemos acceder a ellos
var idComunidades=doc.getElementsByTagName("identificador");
var nomComunidades=doc.getElementsByTagName("nombre");
//recorremos los resultados y los vamos añadiendo al select
for(var i=0; i<idComunidades.length;i++){
var nodo=document.createElement("option");
nodo.value=idComunidades.item(i).firstChild.nodeValue;
nodo.innerHTML=nomComunidades.item(i).firstChild.nodeValue;
select.appendChild(nodo);
}
//añadimos al body el select
document.getElementById("formu").appendChild(select);
//removemos elevento para usar el objeto mas adelante
xhl.removeEventListener("readystatechange",procesarDatosProvincias);
//habilitamos de nuevo el select de comunidades
document.getElementById("comunidad").disabled =false;
}else{
//borramos el select y llamamos al metodo otra vez
var child= document.getElementById("provincias");
child.parentNode.removeChild(child);
procesarDatosProvincias();
}
}
}