Tengo dos selects, uno contiene marcas de automoviles y el otro modelos para dichas marcas. En el formulario inclui las dos etiquetas <select> pero NO las etiquetas <option>.
Para las etiquetas <option> hice otros dos archivos php que completan las opciones y valores llamando dicha informacion desde una base de datos mysql. Luego llamo las opciones con un require() dentro de los selects.
Hasta aca vamos bien. Las opciones me aparecen perfecto pero necesito filtrar las opciones del segundo <select> de acuerdo a la opcion que se seleccione en el primer <select>. Es decir, hacer un combo dependiente que me permite filtrar los modelos de cada vehiculo segun la marca seleccionada.
Como no entiendo nada de AJAX, baje la extension Quick AJAX para Dreamweaver y me presenta el siguiente formulario que se puede ver en este link.
[URL="http://www.flickr.com/photos/41019621@N05/4305354569/#preview"]http://www.flickr.com/photos/41019621@N05/4305354569/#preview[/URL]
Cargo todos los datos y a simple vista todo funciona bien. El navegador no me marca ningun error y cuando cambio el valor del primer select me aparece el mensaje "Cargando..." que le puse para indicar la espera mientras busca los datos. El problema surge porque el segundo select no se actualiza.
No se como pasarle los datos con metodo GET al archivo PHP que me genera las opciones para el segundo select.
Este es el codigo java que se me agrega a la pagina que tiene los selects:
Código:
<script type="text/javascript"> <!-- function openAjax() { var ajax; try{ ajax = new XMLHttpRequest(); }catch(ee){ try{ ajax = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ ajax = new ActiveXObject("Microsoft.XMLHTTP"); }catch(E){ ajax = false; } } } return ajax; } function CpForm(FormName){ comp = "document." + FormName; var frm = eval(comp); Cps = ""; for (i=0; i<frm.length; i++){ Cps = Cps + frm.elements[i].name + "=" + frm.elements[i].value + "&"; } Cps = Cps.substring(0,Cps.length -1); return Cps; } function OpenAjaxPostCmd(pagina,camada,values,msg,divcarga,metodo,tpmsg) { if(document.getElementById) { var ajax = openAjax(); if(tpmsg=='1'){ var exibeLoading = document.getElementById(divcarga); } var exibeResultado = document.getElementById(camada); if(metodo=='1'){ ajax.open("POST", pagina, true); ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); ajax.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate"); ajax.setRequestHeader("Cache-Control", "post-check=0, pre-check=0"); ajax.setRequestHeader("Pragma", "no-cache"); valor = CpForm(values) }else{ valor = null ajax.open("GET", pagina + values, true); } ajax.onreadystatechange = function() { if(ajax.readyState == 1) { if(tpmsg=='1'){ exibeLoading.style.display = 'inline'; exibeLoading.innerHTML = msg }else{ exibeResultado.innerHTML = msg } } if(ajax.readyState == 4) { if(tpmsg=='1'){ exibeLoading.innerHTML = "" exibeLoading.style.display = 'none'; }else{ exibeResultado.innerHTML = "" } if(ajax.status == 200) { var resultado = null; resultado = ajax.responseText; resultado = resultado.replace(/\+/g," "); resultado = unescape(resultado); exibeResultado.innerHTML = resultado; } else { exibeResultado.innerHTML = "<br / ><br / ><center>An error occurred:</center><br / ><br / > <center>" + resultado + "</center>"; } } } ajax.send(valor); } } //--> </script>
y al primer select se le agrega ademas un evento onchange:
Código:
<select name="select-vmarcas" id="select-vmarcas" onchange="OpenAjaxPostCmd('http://localhost/da/selects/vmodelos.php','select-vmodelos','?field1=value1','Cargando...','ajax-wait','2','1')" > <?php require("selects/vmarcas.php"); ?> </select>
el tema es que no se que indicarle al evento onchange para que me levante el nombre del campo y el valor del campo seleccionado en el primer select.
pueden ver que en el evento onchange quedo ?field1=value1
¿Que tengo que poner ahi?
el formulario completo es:
Código:
¡Ayuda por favor! <form method="post" id="buscador"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td><label for="select-categorias">Producto:</label></td> <td><select name="select-categorias" id="select-categorias"> <?php require("selects/categorias.php"); ?> </select></td> </tr> <tr> <td><label for="select-vmarcas">Marca:</label></td> <td><select name="select-vmarcas" id="select-vmarcas" onchange="OpenAjaxPostCmd('http://localhost/da/selects/vmodelos.php','select-vmodelos','?field1=value1=select-vmarcas','Cargando...','ajax-wait','2','1')" > <?php require("selects/vmarcas.php"); ?> </select>