feat: agregar lógica JS para envío de datos mediante FormData en los formularios

This commit is contained in:
Christian Julian Jimenez 2025-04-24 17:26:26 -06:00
parent e6f9dd1226
commit 7dfd10594f
6 changed files with 376 additions and 16 deletions

View File

@ -503,3 +503,27 @@ label {
button:hover {
background-color: #432d74;
}
.mensaje-error {
display: none;
background-color: #f8d7da;
color: #dc3545;
border: 1px solid #dc3545;
border-radius: 4px;
padding: 0.75rem;
margin-top: 1rem;
text-align: center;
animation: fadeIn 0.3s ease-in-out;
}
.mensaje-exito {
display: none;
background-color: #d7f8e4;
color: #35dc67;
border: 1px solid #5cdc35;
border-radius: 4px;
padding: 0.75rem;
margin-top: 1rem;
text-align: center;
animation: fadeIn 0.3s ease-in-out;
}

View File

@ -91,10 +91,10 @@
<h3 class="title2">¡Bienvenido (a)!</h3>
<p>Nos gustaría conocerte mejor</p>
<br>
<form id=""formulario-datos-basicos" action="" method="POST">
<input type="hidden" name="fecha_entrada" value="">
<input type="hidden" name="fecha_salida" value="">
<form id="formulario-datos-basicos" action="" method="POST">
<input type="hidden" id="id_candidato" name="id_candidato">
<input type="hidden" id="fecha_entrada" name="fecha_entrada" value="">
<input type="hidden" id="fecha_salida" name="fecha_salida" value="">
<div>
<label for ="nombres">Nombres:</label>
@ -117,7 +117,7 @@
<div>
<label for="telefono">Teléfono:</label>
<input type="text" id="telefono" name="telefono" required>
<input type="number" id="telefono" name="telefono" required>
</div>
<div>
@ -182,17 +182,18 @@
<br>
<button type="submit">Enviar</button>
<div id="mensaje-exito" class="mensaje-exito"></div>
<div id="mensaje-error" class="mensaje-error"><p>hola</p></div>
</form>
</main>
<!-- MAIN -->
</section>
<!-- NAVBAR -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="js/inicio.js"></script>
<script src="js/form_demografico.js"></script>
<script src="js/form.js"></script>
<script src="js/form_datos_basicos.js"""
<script src="https://website-widgets.pages.dev/dist/sienna.min.js" defer></script>
</body>
</html>

View File

@ -89,12 +89,13 @@
</ul>
<div class="form-container">
<form id="candidatoForm" method="post" action="#">
<form id="formulario-datos-extendido" method="post" action="#">
<div class="form-section">
<br>
<h3>Ubicación</h3>
<br>
<div class="form-row">
<input type="hidden" id="id_candidato" name="id_candidato">
<div class="form-col">
<div class="form-group">
<label for="id_pais" class="required">País</label>
@ -212,7 +213,10 @@
<br>
<div class="form-group">
<label for="calificacion_servicio">Calificación del Servicio</label>
<p>Calificación del Servicio</p>
<br>
<label for="calificacion_servicio">¿Qué tan satisfecho estás con nuestra institución en general, considerando la calidad de las instalaciones, la atención del personal y el proceso de certificación?</label>
<br>
<select id="calificacion_servicio" name="calificacion_servicio" class="select-emoji">
<option value="">Seleccione una calificación...</option>
<option value="1">😡 Muy insatisfecho</option>
@ -234,6 +238,9 @@
<br>
<button type="submit" class="btn-submit">Enviar</button>
<div id="mensaje-exito" class="mensaje-exito"></div>
<div id="mensaje-error" class="mensaje-error"></div>
</form>
</div>
@ -242,10 +249,10 @@
<!-- MAIN -->
</section>
<!-- NAVBAR -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="js/inicio.js"></script>
<script src="js/form_demografico.js"></script>
<script src="js/form.js"></script>
<script src="js/form_datos_extendidos.js"></script>
<script src="https://website-widgets.pages.dev/dist/sienna.min.js" defer></script>
</body>
</html>

148
js/form.js Normal file
View File

@ -0,0 +1,148 @@
// SIDEBAR DROPDOWN
const allDropdown = document.querySelectorAll('#sidebar .side-dropdown');
const sidebar = document.getElementById('sidebar');
allDropdown.forEach(item=> {
const a = item.parentElement.querySelector('a:first-child');
a.addEventListener('click', function (e) {
e.preventDefault();
if(!this.classList.contains('active')) {
allDropdown.forEach(i=> {
const aLink = i.parentElement.querySelector('a:first-child');
aLink.classList.remove('active');
i.classList.remove('show');
})
}
this.classList.toggle('active');
item.classList.toggle('show');
})
})
// SIDEBAR COLLAPSE
const toggleSidebar = document.querySelector('nav .toggle-sidebar');
const allSideDivider = document.querySelectorAll('#sidebar .divider');
if(sidebar.classList.contains('hide')) {
allSideDivider.forEach(item=> {
item.textContent = '-'
})
allDropdown.forEach(item=> {
const a = item.parentElement.querySelector('a:first-child');
a.classList.remove('active');
item.classList.remove('show');
})
} else {
allSideDivider.forEach(item=> {
item.textContent = item.dataset.text;
})
}
toggleSidebar.addEventListener('click', function () {
sidebar.classList.toggle('hide');
if(sidebar.classList.contains('hide')) {
allSideDivider.forEach(item=> {
item.textContent = '-'
})
allDropdown.forEach(item=> {
const a = item.parentElement.querySelector('a:first-child');
a.classList.remove('active');
item.classList.remove('show');
})
} else {
allSideDivider.forEach(item=> {
item.textContent = item.dataset.text;
})
}
})
sidebar.addEventListener('mouseleave', function () {
if(this.classList.contains('hide')) {
allDropdown.forEach(item=> {
const a = item.parentElement.querySelector('a:first-child');
a.classList.remove('active');
item.classList.remove('show');
})
allSideDivider.forEach(item=> {
item.textContent = '-'
})
}
})
sidebar.addEventListener('mouseenter', function () {
if(this.classList.contains('hide')) {
allDropdown.forEach(item=> {
const a = item.parentElement.querySelector('a:first-child');
a.classList.remove('active');
item.classList.remove('show');
})
allSideDivider.forEach(item=> {
item.textContent = item.dataset.text;
})
}
})
// PROFILE DROPDOWN
const profile = document.querySelector('nav .profile');
const imgProfile = profile.querySelector('img');
const dropdownProfile = profile.querySelector('.profile-link');
imgProfile.addEventListener('click', function () {
dropdownProfile.classList.toggle('show');
})
// MENU
const allMenu = document.querySelectorAll('main .content-data .head .menu');
allMenu.forEach(item=> {
const icon = item.querySelector('.icon');
const menuLink = item.querySelector('.menu-link');
icon.addEventListener('click', function () {
menuLink.classList.toggle('show');
})
})
window.addEventListener('click', function (e) {
if(e.target !== imgProfile) {
if(e.target !== dropdownProfile) {
if(dropdownProfile.classList.contains('show')) {
dropdownProfile.classList.remove('show');
}
}
}
allMenu.forEach(item=> {
const icon = item.querySelector('.icon');
const menuLink = item.querySelector('.menu-link');
if(e.target !== icon) {
if(e.target !== menuLink) {
if (menuLink.classList.contains('show')) {
menuLink.classList.remove('show')
}
}
}
})
})

119
js/form_datos_basicos.js Normal file
View File

@ -0,0 +1,119 @@
const formulario = document.getElementById("formulario-datos-basicos");
const notificacion = document.getElementById("mensaje-error");
// Función para validar el nombre
function validarNombre(nombre) {
const nombreRegex = /^[a-zA-ZÀ-ÿ\s]+$/; // Permite letras y espacios
return nombreRegex.test(nombre);
}
//funcion para validar apellido
function validarApellido(apellido) {
const apellidoRegex = /^[a-zA-ZÀ-ÿ]+$/; // Permite solo letras, sin espacios
return apellidoRegex.test(apellido);
}
// Función para validar número telefónico (10 dígitos)
function validarTelefono(telefono) {
const telefonoRegex = /^\d{10}$/;
return telefonoRegex.test(telefono);
}
// Función para validar correo electrónico
function validarCorreo(correo) {
const correoRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return correoRegex.test(correo);
}
formulario.addEventListener("submit", async(event) => {
event.preventDefault();
// Limpiar mensaje de error previo
notificacion.textContent = "";
notificacion.style.display = "none";
// Obtener valores de los campos
const idCandidato = document.getElementById('id_candidato').value;
const fechaEntrada = document.getElementById('fecha_entrada').value;
const fechaSalida = document.getElementById('fecha_salida').value;
const nombres = document.getElementById('nombres').value.trim();
const primerApellido = document.getElementById('primer_apellido').value.trim();
const segundoApellido = document.getElementById('segundo_apellido').value.trim();
const correo = document.getElementById('correo').value.trim();
const telefono = document.getElementById('telefono').value.trim();
const idExamen = document.getElementById('id_examen').value;
const idTipoId = document.getElementById('id_tipo_id').value;
const idRangoEdad = document.getElementById('id_rango_edad').value;
const idGenero = document.getElementById('id_genero').value;
// Validaciones
let errores = [];
// Validar correo electrónico
if (!validarCorreo(correo)) {
errores.push("El correo electrónico no es válido. ");
}
// validar nombre
if (!validarNombre(nombres)) {
errores.push("El nombre no tiene un formato válido. ");
}
// validar apellido
if (!validarApellido(primerApellido)) {
errores.push("El primer apellido no tiene un formato válido. ");
}
if (!validarApellido(segundoApellido)) {
errores.push("El segundo apellido no tiene un formato válido. ");
}
// Validar número telefónico
if (!validarTelefono(telefono)) {
errores.push("El número telefónico debe ser un número de 10 dígitos. ");
}
// Si hay errores, mostrarlos y detener el envío
if (errores.length > 0) {
notificacion.textContent = errores.join("\n");
notificacion.style.display = "block";
return;
}
// Preparar datos para envío
const formData = new FormData();
formData.append("id_candidato", idCandidato);
formData.append("fecha_entrada", fechaEntrada);
formData.append("fecha_salida", fechaSalida);
formData.append("nombres", nombres);
formData.append("primer_apellido", primerApellido);
formData.append("segundo_apellido", segundoApellido);
formData.append("correo", correo);
formData.append("telefono", telefono);
formData.append("id_examen", idExamen);
formData.append("id_tipo_id", idTipoId);
formData.append("id_rango_edad", idRangoEdad);
formData.append("id_genero", idGenero);
try {
const respuesta = await fetch('ruta', {
method: "POST",
body: formData,
});
const resultado = await respuesta.json();
if (resultado.datosIngresados) {
alert('Se guardó la información correctamente');
window.location.href = 'inicio.html';
} else {
notificacion.textContent = resultado.mensaje;
notificacion.style.display = "block";
}
} catch (error) {
notificacion.textContent = "Lo sentimos, ocurrió un error: " + error.message;
notificacion.style.display = "block";
}
});

View File

@ -0,0 +1,61 @@
const formulario = document.getElementById("formulario-datos-extendido");
const notificacion = document.getElementById("mensaje-error");
formulario.addEventListener("submit", async(event) => {
event.preventDefault();
// Limpiar mensaje de error previo
notificacion.textContent = "";
notificacion.style.display = "none";
// Obtener valores de los campos
const idCandidato = document.getElementById('id_candidato').value;
const idPais = document.getElementById('id_pais').value;
const codigoPostal = document.getElementById('codigo_postal').value; // campo numérico, no necesita trim
const idEstado = document.getElementById('id_estado').value;
const idMunicipio = document.getElementById('id_municipio').value;
const idColonia = document.getElementById('id_colonia').value;
const idNivel = document.getElementById('id_nivel').value;
const idGiro = document.getElementById('id_giro').value;
const nombreEmpresa = document.getElementById('nombre_empresa').value.trim();
const motivoExamen = document.getElementById('motivo_examen').value.trim();
const calificacionServicio = document.getElementById('calificacion_servicio').value;
const consentimientoPub = document.getElementById('consentimiento_pub').checked;
// Preparar datos para envío
const formData = new FormData();
formData.append("id_candidato", idCandidato);
formData.append("id_pais", idPais);
formData.append("codigo_postal", codigoPostal);
formData.append("id_estado", idEstado);
formData.append("id_municipio", idMunicipio);
formData.append("id_colonia", idColonia);
formData.append("id_nivel", idNivel);
formData.append("id_giro", idGiro);
formData.append("nombre_empresa", nombreEmpresa);
formData.append("motivo_examen", motivoExamen);
formData.append("calificacion_servicio", calificacionServicio);
formData.append("consentimiento_pub", consentimientoPub ? 1 : 0);
try {
const respuesta = await fetch('ruta', {
method: "POST",
body: formData,
});
const resultado = await respuesta.json();
if (resultado.datosIngresados) {
alert('Se guardó la información correctamente');
window.location.href = 'inicio.html';
} else {
notificacion.textContent = resultado.mensaje;
notificacion.style.display = "block";
}
} catch (error) {
notificacion.textContent = "Lo sentimos, ocurrió un error: " + error.message;
notificacion.style.display = "block";
}
});