103 lines
3.4 KiB
JavaScript
103 lines
3.4 KiB
JavaScript
/**
|
|
* Envío AJAX del formulario de contacto + modal de éxito.
|
|
*/
|
|
(function () {
|
|
'use strict';
|
|
|
|
const form = document.getElementById('form-contacto');
|
|
const modal = document.getElementById('modal-contacto');
|
|
const btnCerrar = modal ? modal.querySelector('.modal-cerrar') : null;
|
|
const btnEnviar = form ? form.querySelector('button[type="submit"]') : null;
|
|
|
|
if (!form || !modal) return;
|
|
|
|
let redirectTimer = null;
|
|
|
|
// ── Helpers ────────────────────────────────────────────────────────
|
|
function abrirModal(mensaje) {
|
|
const texto = modal.querySelector('.modal-mensaje');
|
|
if (texto && mensaje) texto.textContent = mensaje;
|
|
modal.classList.add('is-visible');
|
|
modal.setAttribute('aria-hidden', 'false');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function cerrarModal(redirigir = false) {
|
|
modal.classList.remove('is-visible');
|
|
modal.setAttribute('aria-hidden', 'true');
|
|
document.body.style.overflow = '';
|
|
if (redirectTimer) clearTimeout(redirectTimer);
|
|
if (redirigir) window.location.href = 'index.html';
|
|
}
|
|
|
|
function mostrarError(mensaje) {
|
|
// Reutilizamos el modal con estética distinta
|
|
modal.classList.add('is-error');
|
|
abrirModal(mensaje);
|
|
}
|
|
|
|
// ── Cerrar modal ───────────────────────────────────────────────────
|
|
if (btnCerrar) {
|
|
btnCerrar.addEventListener('click', () => cerrarModal(true));
|
|
}
|
|
modal.addEventListener('click', (e) => {
|
|
if (e.target === modal) cerrarModal(true);
|
|
});
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && modal.classList.contains('is-visible')) {
|
|
cerrarModal(true);
|
|
}
|
|
});
|
|
|
|
// ── Submit ─────────────────────────────────────────────────────────
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
// Validación nativa HTML5
|
|
if (!form.checkValidity()) {
|
|
form.reportValidity();
|
|
return;
|
|
}
|
|
|
|
// Estado de carga
|
|
const textoOriginal = btnEnviar ? btnEnviar.innerHTML : '';
|
|
if (btnEnviar) {
|
|
btnEnviar.disabled = true;
|
|
btnEnviar.innerHTML = 'Enviando…';
|
|
}
|
|
|
|
try {
|
|
const data = new FormData(form);
|
|
const res = await fetch('enviar.php', {
|
|
method: 'POST',
|
|
body: data,
|
|
headers: { 'X-Requested-With': 'XMLHttpRequest' },
|
|
});
|
|
|
|
const json = await res.json().catch(() => ({
|
|
status: 'error',
|
|
message: 'Respuesta inválida del servidor.',
|
|
}));
|
|
|
|
if (json.status === 'success') {
|
|
modal.classList.remove('is-error');
|
|
abrirModal(json.message || '¡Gracias! Te contactaremos en breve.');
|
|
form.reset();
|
|
|
|
const delay = Number(json.delay) || 4000;
|
|
redirectTimer = setTimeout(() => {
|
|
window.location.href = json.redirect || 'index.html';
|
|
}, delay);
|
|
} else {
|
|
mostrarError(json.message || 'No pudimos enviar tu mensaje.');
|
|
}
|
|
} catch (err) {
|
|
mostrarError('Hubo un problema de conexión. Probá nuevamente.');
|
|
} finally {
|
|
if (btnEnviar) {
|
|
btnEnviar.disabled = false;
|
|
btnEnviar.innerHTML = textoOriginal;
|
|
}
|
|
}
|
|
});
|
|
})(); |