78 lines
3.5 KiB
JavaScript
78 lines
3.5 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function() {
|
|
var buscarBtn = document.getElementById("buscarBtn");
|
|
|
|
//Añadir un evento al boton de buscar
|
|
buscarBtn.addEventListener("click", function() {
|
|
var codigoPostal = document.getElementById("codigo_postal").value;
|
|
console.log(codigoPostal);
|
|
|
|
//verificar si el codigo postal esta vacio
|
|
if (codigoPostal) {
|
|
//crear la url para la peticion
|
|
var url = "./php/buscarCodigo.php?codigo_postal=" + encodeURIComponent(codigoPostal);
|
|
|
|
//Realiza una solicitud HTTP GET a la URL especificada
|
|
fetch(url)
|
|
.then(response => {
|
|
//console.log("Estado de la respuesta:", response.status);
|
|
//console.log("Contenido de la respuesta:", response);
|
|
// Verifica si la respuesta del servidor es exitosa
|
|
if (!response.ok) {
|
|
throw new Error("Error en la respuesta del servidor");
|
|
}
|
|
//Convierte la respuesta a formato JSON
|
|
return response.json();
|
|
|
|
|
|
})
|
|
.then(data => {
|
|
var estadoSelect = document.getElementById("id_estado");
|
|
var municipioSelect = document.getElementById("id_municipio");
|
|
var coloniaSelect = document.getElementById("id_colonia");
|
|
|
|
// Inicializa los elementos select con una opción por defecto
|
|
estadoSelect.innerHTML = "<option value=''>Seleccionar Estado</option>";
|
|
municipioSelect.innerHTML = "<option value=''>Seleccionar Municipios</option>";
|
|
coloniaSelect.innerHTML = "<option value=''>Seleccionar Colonia</option>";
|
|
|
|
// Verifica si se recibieron datos
|
|
if (data.length > 0) {
|
|
//Crea conjuntos para almacenar estados, ciudades y colonias únicos
|
|
let estados = new Set();
|
|
let municipios = new Set();
|
|
let colonias = [];
|
|
|
|
// Itera sobre cada fila de datos recibidos
|
|
data.forEach(row => {
|
|
estados.add(row.estado);
|
|
municipios.add(row.municipio);
|
|
colonias.push(row.colonia);
|
|
});
|
|
|
|
//Añade las opciones de estados al elemento select
|
|
estados.forEach(estado => {
|
|
estadoSelect.innerHTML += "<option value='" + estado + "'>" + estado + "</option>";
|
|
});
|
|
|
|
//Añade las opciones de ciudades al elemento select
|
|
municipios.forEach(municipio => {
|
|
municipioSelect.innerHTML += "<option value='" + municipio + "'>" + municipio + "</option>";
|
|
});
|
|
|
|
//Añade las opciones de colonias al elemento select
|
|
colonias.forEach(colonia => {
|
|
coloniaSelect.innerHTML += "<option value='" + colonia + "'>" + colonia + "</option>";
|
|
});
|
|
} else {
|
|
alert("No se encontraron datos para el código postal ingresado.");
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error("Error en la solicitud:", error);
|
|
});
|
|
} else {
|
|
alert("Por favor, ingrese un código postal.");
|
|
}
|
|
});
|
|
});
|