Para que no te compliques más, puedes hacer lo siguiente:
En un formulario, ten a ambos
<select>:
Código HTML:
Ver original<form id="busqueda" method="get" action="buscar.php"> <!-- Aquí irán las opciones que le asignes -->
<!-- Aquí irán las opciones que le asignes -->
<input type="submit" value="Buscar" />
Además, necesitas tener un elemento para mostrar el resultado. Por ejemplo:
Luego, una vez que hayas seleccionado una opción en cada
<select> y hayas pulsado el botón de búsqueda, se realizará el envío de los datos, disparándose así el evento
submit en el formulario. Como deseas hacer esto mediante una petición asíncrona, necesitas cancelar la ejecución de dicho evento, para lo cual debes utilizar el método
.preventDefault(). Fíjate también que el formulario tiene un identificador, un método de envío y un archivo de destino, el mismo en el que realizarás las consulta a la base de datos.
Adaptando esto al ejemplo anterior, el
script quedaría así:
Código Javascript
:
Ver originaldocument.addEventListener("DOMContentLoaded", function(){ //Al cargar el documento
var formulario = document.querySelector("#busqueda"),
resultado = document.querySelector("#resultado");
formulario.addEventListener("submit", function(event){ //Al realizarse el envío
event.preventDefault(); //Se cancela el envío
var ajax = new XMLHttpRequest(); //Se crea la instancia al objeto XMLHttpRequest
for (var i = 0, selects = this.elements, total = selects.length, query = []; i < total; i++){
if (selects[i].type != "submit"){
query.push(selects[i].id + "=" + selects[i].value);
}
}
ajax.open(this.method, this.action + "?" + query.join("&"), true);
ajax.send();
ajax.addEventListener("load", function(){
if (this.status == 200){
resultado.innerHTML = this.responseText;
}
}, false);
}, false);
}, false);
Una vez producido el evento
DOMContentLoaded, el cual indica que ha terminado de cargar el modelo de objetos del documento (
DOM), es decir, los elementos HTML que contiene el documento, procedemos a tomar al formulario y al elemento en el cual se mostrará el resultado y los asignamos a dos variables. Enseguida, registramos el evento
submit en el formulario y, en la función manejadora o
handler —que no es otra cosa que una función anónima la cual, luego de ocurrido el evento, ejecutará una serie de instrucciones que le indiquemos—, cancelamos la ejecución del evento, es decir, el envío de los datos del formulario, y creamos una instancia al objeto
XMLHttpRequest para realizar la petición asíncrona.
Hecho esto, procedemos a crear la cadena de consulta (o
query string), misma que contendrá los valores que enviaremos al lado del servidor. Para esto, recorremos al conjunto de elementos del formulario y, en cada iteración, guardamos en un arreglo el identificador de cada elemento y su valor en una misma cadena con la forma
variable=valor, siempre y cuando el tipo del elemento evaluado sea diferente a
submit, esto con el fin de evitar enviar el valor del botón de envío, el cual es irrelevante.
A continuación, establecemos los datos de la petición, empezando por el método de envío que, en este caso, será el establecido en el atributo
method del formulario. Como estamos trabajando dentro de la función manejadora registrada en el formulario, este último es accesible mediante la palabra reservada
this. Como utilizaremos el método de envío HTTP GET, la cadena de consulta deberá estar unida a la ruta del archivo hacia el cual se realizará el envío de los datos. Para esto, accedemos a dicha ruta mediante el valor establecido en el atributo
action del formulario, lo concatenamos con el separador
? y el conjunto de valores contenidos en los elementos del formulario, pero como estos se encuentran dentro de un arreglo, debemos formar con ellos una cadena que tenga la forma
a=1&b=2&c=3. Para esto, podemos utilizar el método
.join() el cual permite unir a los elementos de un arreglo mediante una cadena, o con comas, si es que no se indica un elemento unificador. Establecemos la petición como asíncrona (argumento
true) y realizamos el envío.
Finalmente, cuando se haya completado la petición (para lo cual se registró el evento
load) en la instancia del objeto
XMLHttpRequest), verificamos que esta haya sido exitosa; de ser así, asignamos como contenido del elemento en el cual se mostrará el resultado a la respuesta obtenida.
Todos los registros de eventos en los distintos elementos utilizados, se realizaron con el método
.addEventListener().
Ten en cuenta que, en el archivo PHP, deberás acceder a los valores recibidos por medio de los nombres asignados a las variables de la cadena de consulta, es decir:
Si tienes alguna duda al respecto, consulta los enlaces que te he dejado a lo largo de este comentario (son las palabras resaltadas en color anaranjado). También puedes consultar cualquiera de los distintos manuales que hay en la web, pero si solo vas a copiar y pegar y luego vas a volver a preguntar por algo que debiste resolver siguiendo las pautas que te dí, no cuentes conmigo.
Un saludo
Este tema le ha gustado a 1 personas