feat: agregar lógica JS para envío de datos mediante FormData en los formularios
This commit is contained in:
parent
e6f9dd1226
commit
7dfd10594f
24
css/form.css
24
css/form.css
|
@ -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;
|
||||
}
|
|
@ -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>
|
|
@ -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>
|
|
@ -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')
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
|
@ -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";
|
||||
}
|
||||
});
|
|
@ -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";
|
||||
}
|
||||
});
|
Loading…
Reference in New Issue