christian.julian
/
LANIA_Proyecto
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Nuevos formularios

This commit is contained in:
VictorMongeM 2025-05-12 19:34:10 -06:00
parent 074453eda8
commit cf78a42a81
9 changed files with 215 additions and 432 deletions

2
controllers/LoginController.php
View File

@ -30,6 +30,8 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
'res' => $e->getMessage() 'res' => $e->getMessage()
]); ]);
} }
} else {
header('HTTP/1.1 405 Method Not Allowed');
} }
?> ?>

31
js/formulario-candidato.js
View File

@ -130,10 +130,6 @@ formulario.addEventListener("submit", async(event) => {
notificacion.style.display = "none"; notificacion.style.display = "none";
// Obtener valores de los campos // 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 nombres = document.getElementById('nombres').value.trim();
const primerApellido = document.getElementById('primer_apellido').value.trim(); const primerApellido = document.getElementById('primer_apellido').value.trim();
const segundoApellido = document.getElementById('segundo_apellido').value.trim(); const segundoApellido = document.getElementById('segundo_apellido').value.trim();
@ -150,52 +146,51 @@ formulario.addEventListener("submit", async(event) => {
// Validar correo electrónico // Validar correo electrónico
if (!validarCorreo(correo)) { if (!validarCorreo(correo)) {
errores.push("El correo electrónico no es válido. "); errores.push("⦁ El correo electrónico no es válido. ");
} }
// validar nombre // validar nombre
if (!validarNombre(nombres)) { if (!validarNombre(nombres)) {
errores.push("El nombre no tiene un formato válido. "); errores.push("⦁ El nombre no tiene un formato válido. ");
} }
// validar apellido // validar apellido
if (!validarApellido(primerApellido)) { if (!validarApellido(primerApellido)) {
errores.push("El primer apellido no tiene un formato válido. "); errores.push("⦁ El primer apellido no tiene un formato válido. ");
} }
if (!validarApellido(segundoApellido)) { if (!validarApellido(segundoApellido)) {
errores.push("El segundo apellido no tiene un formato válido. "); errores.push("⦁ El segundo apellido no tiene un formato válido. ");
} }
// Validar número telefónico // Validar número telefónico
if (!validarTelefono(telefono)) { if (!validarTelefono(telefono)) {
errores.push("El número telefónico debe ser un número de 10 dígitos. "); errores.push("⦁ El número telefónico debe ser un número de 10 dígitos. ");
} }
if(!selectExamenValido()){ if(!selectExamenValido()){
errores.push("Seleccione un examen. "); errores.push("⦁ Seleccione un examen. ");
} }
if(!selectTipoIdentificacionValido()){ if(!selectTipoIdentificacionValido()){
errores.push("Seleccione un tipo de identificación. "); errores.push("⦁ Seleccione un tipo de identificación. ");
} }
if(!selectRangoEdadValido()){ if(!selectRangoEdadValido()){
errores.push("Seleccione un rango de edad. "); errores.push("⦁ Seleccione un rango de edad. ");
} }
if(!selectGeneroValido()){ if(!selectGeneroValido()){
errores.push("Seleccione un género. "); errores.push("⦁ Seleccione un género. ");
} }
// Si hay errores, mostrarlos y detener el envío // Si hay errores, mostrarlos y detener el envío
if (errores.length > 0) { if (errores.length > 0) {
notificacion.textContent = errores.join("\n"); alert("Datos del formulario incompletos\n" + errores.join("\n"));
notificacion.style.display = "block"; //notificacion.textContent = errores.join("\n");
//notificacion.style.display = "block";
return; return;
} }
// Preparar datos para envío // Preparar datos para envío
const formData = new FormData(); const formData = new FormData();
//formData.append("fecha_entrada", fechaEntrada); // No se usa porque tiene valor default
//formData.append("fecha_salida", fechaSalida); // Se llena al completar el otro formulario de información
formData.append("nombres", nombres); formData.append("nombres", nombres);
formData.append("primer_apellido", primerApellido); formData.append("primer_apellido", primerApellido);
formData.append("segundo_apellido", segundoApellido); formData.append("segundo_apellido", segundoApellido);
@ -219,7 +214,7 @@ formulario.addEventListener("submit", async(event) => {
// Verificar si el registro fue exitoso // Verificar si el registro fue exitoso
if (resultado.registroExitoso) { if (resultado.registroExitoso) {
alert('Se guardó la información correctamente'); alert('Se guardó la información correctamente');
window.location.href = 'inicio.html'; window.location.href = 'pantalla-salida-form.html';
} else { } else {
notificacion.textContent = resultado.message; notificacion.textContent = resultado.message;
notificacion.style.display = "block"; notificacion.style.display = "block";

49
js/formulario-datos-candidato.js
View File

@ -1,6 +1,5 @@
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
const formulario = document.getElementById("formulario-datos-extendido"); const formulario = document.getElementById("formulario-datos-extendido");
const notificacion = document.getElementById("mensaje-error");
const buscarBtn = document.getElementById("buscarBtn"); const buscarBtn = document.getElementById("buscarBtn");
const paisSelect = document.getElementById("id_pais"); const paisSelect = document.getElementById("id_pais");
const inputCodigoPostal = document.getElementById("codigo_postal"); const inputCodigoPostal = document.getElementById("codigo_postal");
@ -84,7 +83,7 @@ document.addEventListener("DOMContentLoaded", function () {
dataListEmpresasInstituciones.innerHTML += "<option value='" + row.nombre_empresa_institucion + "'>" + row.nombre_empresa_institucion + "</option>"; dataListEmpresasInstituciones.innerHTML += "<option value='" + row.nombre_empresa_institucion + "'>" + row.nombre_empresa_institucion + "</option>";
}); });
} else { } else {
alert("llenarDataListEmpresasInstituciones(): No se encontraron datos para las empresas o instituciones."); console.log("llenarDataListEmpresasInstituciones(): No se encontraron datos para las empresas o instituciones.");
} }
}) })
.catch(error => { .catch(error => {
@ -151,9 +150,18 @@ document.addEventListener("DOMContentLoaded", function () {
inputCodigoPostal.removeAttribute("disabled"); inputCodigoPostal.removeAttribute("disabled");
inputButtonBuscarCodigoPostal.removeAttribute("disabled"); inputButtonBuscarCodigoPostal.removeAttribute("disabled");
} else { } else {
// Si el país no es México, deshabilitar el campo de código postal inputCodigoPostal.value = "";
inputCodigoPostal.setAttribute("disabled", "disabled"); inputCodigoPostal.setAttribute("disabled", "");
inputButtonBuscarCodigoPostal.setAttribute("disabled", "disabled"); inputButtonBuscarCodigoPostal.setAttribute("disabled", "");
estadoSelect.removeAttribute("required");
municipioSelect.removeAttribute("required");
coloniaSelect.removeAttribute("required");
estadoSelect.setAttribute("disabled", "");
municipioSelect.setAttribute("disabled", "");
coloniaSelect.setAttribute("disabled", "");
estadoSelect.innerHTML = "<option value='NULL'>Seleccione su estado</option>";
municipioSelect.innerHTML = "<option value='NULL'>Seleccione su municipio</option>";
coloniaSelect.innerHTML = "<option value='NULL'>Seleccione su colonia</option>";
} }
}); });
@ -241,10 +249,6 @@ document.addEventListener("DOMContentLoaded", function () {
formulario.addEventListener("submit", async(event) => { formulario.addEventListener("submit", async(event) => {
event.preventDefault(); event.preventDefault();
// Limpiar mensaje de error previo
notificacion.textContent = "";
notificacion.style.display = "none";
// Obtener valores de los campos // Obtener valores de los campos
const idCandidato = document.getElementById('id_candidato').value; const idCandidato = document.getElementById('id_candidato').value;
const idPais = document.getElementById('id_pais').value; const idPais = document.getElementById('id_pais').value;
@ -267,31 +271,29 @@ document.addEventListener("DOMContentLoaded", function () {
let validaciones = []; let validaciones = [];
if(!selectPaisValido()){ if(!selectPaisValido()){
validaciones.push("Seleccione un país. "); validaciones.push("⦁ Seleccione un país. ");
} }
if(!selectNivelEstudioValido()){ if(!selectNivelEstudioValido()){
validaciones.push("Seleccione un nivel de estudio."); validaciones.push("⦁ Seleccione un nivel de estudio.");
} }
if(!selectGiroValido()){ if(!selectGiroValido()){
validaciones.push("Seleccione un giro. "); validaciones.push("⦁ Seleccione un giro. ");
} }
if(!selectCalificacionServicioValido()){ if(!selectCalificacionServicioValido()){
validaciones.push("Seleccione una calificación de servicio. "); validaciones.push("⦁ Seleccione una calificación de servicio. ");
} }
if(!selectEstadoValido()){ if(!selectEstadoValido()){
validaciones.push("Seleccione un estado. "); validaciones.push("⦁ Seleccione un estado. ");
} }
if(!selectMunicipioValido()){ if(!selectMunicipioValido()){
validaciones.push("Seleccione un municipio. "); validaciones.push("⦁ Seleccione un municipio. ");
} }
if(!selectColoniaValido()){ if(!selectColoniaValido()){
validaciones.push("Seleccione una colonia. "); validaciones.push("⦁ Seleccione una colonia. ");
} }
if(validaciones.length > 0){ if(validaciones.length > 0){
alert("Campos requeridos sin llenar"); alert("Campos del formulario sin llenar\n" + validaciones.join("\n"));
notificacion.textContent = validaciones.join("\n");
notificacion.style.display = "block";
return; return;
} }
@ -339,13 +341,12 @@ document.addEventListener("DOMContentLoaded", function () {
alert('Se guardó la información correctamente'); alert('Se guardó la información correctamente');
//window.location.href = 'inicio.html'; //window.location.href = 'inicio.html';
} else if(resultado.estado === "error") { } else if(resultado.estado === "error") {
console.error(resultado.res); console.error("RegistrarInfoCandidato.php: " + resultado.res);
notificacion.textContent = resultado.mensaje; alert("Ocurrió un error, intentelo más tarde.");
notificacion.style.display = "block";
} }
} catch (error) { } catch (error) {
notificacion.textContent = "Lo sentimos, ocurrió un error: " + error.message; alert("Ocurrió un error, intentelo más tarde.");
notificacion.style.display = "block"; console.error("Error en try-catch de fetch a RegistrarInfoCandidato: " + error.message);
} }
}); });
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - EVENTOS // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - EVENTOS

5
views/assets/bootstrap/css/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

6
views/assets/bootstrap/js/bootstrap.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
views/assets/img/logo-lania.png Normal file
View File

Binary file not shown.
Side by Side

After

(image error) Size: 257 KiB

222
views/formulario-candidato.html
View File

@ -1,169 +1,67 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html data-bs-theme="light" lang="es-mx">
<head> <head>
<meta charset="UTF-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'> <title>Formulario de registro</title>
<link rel="stylesheet" href="../css/form.css"> <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<title>AdminSite</title>
</head> </head>
<body> <body>
<div class="text-bg-light" style="height: 70px;"><img src="assets/img/logo-lania.png" style="height: 65px;margin: 0px 10px;" draggable="false" alt="Laboratorio Nacional de Informática Avanzada"></div>
<!-- SIDEBAR --> <div class="card">
<section id="sidebar"> <div class="card-body" style="margin: 0px 30px;">
<a href="inicio.html" class="brand"><i class='bx bx-code-alt icon' ></i> LANIA</a>
<!-- <a href="#" class="brand">
<img src="img/lania_logo.png" alt="Logo" style="height: 40px;">
</a> -->
<ul class="side-menu">
<li><a href="#"><i class='bx bxs-dashboard icon' ></i> Dashboard</a></li>
<li class="divider" data-text="main">Main</li>
<li>
<a href="#"><i class='bx bxs-inbox icon' ></i> Elements <i class='bx bx-chevron-right icon-right' ></i></a>
<ul class="side-dropdown">
<li><a href="#">Alert</a></li>
<li><a href="#">Badges</a></li>
<li><a href="#">Breadcrumbs</a></li>
<li><a href="#">Button</a></li>
</ul>
</li>
<li><a href="#"><i class='bx bxs-chart icon' ></i> Charts</a></li>
<li><a href="#"><i class='bx bxs-widget icon' ></i> Widgets</a></li>
<li class="divider" data-text="tablas y formularios">Tablas y formularios</li>
<li><a href="#"><i class='bx bx-table icon' ></i> Tablas</a></li>
<li>
<a class="active" href="#"><i class='bx bxs-notepad icon' ></i> Formularios <i class='bx bx-chevron-right icon-right' ></i></a>
<ul class="side-dropdown">
<li><a href="../views/formulario-candidato.html">Registro de candidato</a></li>
<li><a href="../views/formulario-datos-candidato.php">Datos de candidato</a></li>
</ul>
</li>
</ul>
<!-- <div class="ads">
<div class="wrapper">
<a href="#" class="btn-upgrade">Upgrade</a>
<p>Become a <span>PRO</span> member and enjoy <span>All Features</span></p>
</div>
</div> -->
</section>
<!-- SIDEBAR -->
<!-- NAVBAR --> <!-- ==================== Formulario ==================== -->
<section id="content"> <form style="margin: 0px 50px;" id="formulario-datos-basicos" action="" method="POST">
<!-- NAVBAR --> <h3>Registro</h3>
<nav> <label class="form-label" for="nombres" style="margin: 10px 0px 5px;">Nombre</label>
<i class='bx bx-menu toggle-sidebar' ></i> <input class="border rounded-pill shadow-sm form-control" type="text" id="nombres" placeholder="Nombre/s" required="">
<form action="#">
<div class="form-group"> <label class="form-label" for="primer_apellido" style="margin: 10px 0px 5px;">Primer apellido</label>
<input type="text" placeholder="Buscar..."> <input class="border rounded-pill shadow-sm form-control" type="text" id="primer_apellido" placeholder="Primer apellido" required="">
<i class='bx bx-search icon' ></i>
</div> <label class="form-label" for="segundo_apellido" style="margin: 10px 0px 5px;">Segundo apellido</label>
</form> <input class="border rounded-pill shadow-sm form-control" type="text" id="segundo_apellido" placeholder="Segundo apellido">
<a href="#" class="nav-link">
<i class='bx bxs-bell icon' ></i> <label class="form-label" for="correo" style="margin: 10px 0px 5px;">Correo electrónico</label>
<span class="badge">5</span> <input class="border rounded-pill shadow-sm form-control" type="email" id="correo" required="" placeholder="usuario@ejemplo.com">
</a>
<a href="#" class="nav-link"> <label class="form-label" for="telefono" style="margin: 10px 0px 5px;">Teléfono</label>
<i class='bx bxs-message-square-dots icon' ></i> <input class="border rounded-pill shadow-sm form-control" type="tel" id="telefono" placeholder="10 digitos de su número de teléfono" minlength="9" maxlength="10" required="">
<span class="badge">8</span>
</a> <label class="form-label" for="id_examen" style="margin: 10px 0px 5px;">Examen</label>
<span class="divider"></span> <select class="border rounded-pill shadow-sm form-select" id="id_examen" required="">
<div class="profile"> <option value="NULL">Seleccione una opción</option>
<img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cGVvcGxlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt=""> </select>
<ul class="profile-link">
<li><a href="#"><i class='bx bxs-user-circle icon' ></i> Profile</a></li> <label class="form-label" for="id_tipo_id" style="margin: 10px 0px 5px;">Tipo de identificación</label>
<li><a href="#"><i class='bx bxs-cog' ></i> Settings</a></li> <select class="border rounded-pill shadow-sm form-select" id="id_tipo_id" required="">
<li><a href="#"><i class='bx bxs-log-out-circle' ></i> Logout</a></li> <option value="NULL">Seleccione una opción</option>
</ul> </select>
</div>
</nav> <label class="form-label" for="id_rango_edad" style="margin: 10px 0px 5px;">Rango de edad</label>
<!-- NAVBAR --> <select class="border rounded-pill shadow-sm form-select" id="id_rango_edad" required="">
<option value="NULL">Seleccione una opción</option>
<!-- MAIN --> </select>
<main>
<h1 class="title">Datos básicos</h1> <label class="form-label" for="id_genero" style="margin: 10px 0px 5px;">Género</label>
<ul class="breadcrumbs"> <select class="border rounded-pill shadow-sm form-select" id="id_genero" required="">
<li><a href="#">Formularios</a></li> <option value="NULL">Seleccione una opción</option>
<li class="divider">/</li> <option value="1">Masculino</option>
<li><a href="#" class="active">Datos básicos</a></li> <option value="2">Femenino</option>
</ul> <option value="3">Prefiero no decir</option>
</select>
<h3 class="title2">¡Bienvenido (a)!</h3>
<p>Nos gustaría conocerte mejor</p> <input class="btn border rounded-pill border-3 border-primary-subtle shadow btn-lg btn-primary" type="submit" value="Enviar" style="margin: 15px 0px;" name="btnEnviar">
<br> </form>
<form id="formulario-datos-basicos" action="" method="POST"> <!-- ==================== Fin del formulario ==================== -->
<input type="hidden" id="id_candidato" name="id_candidato"> <div id="mensaje-error"></div>
<input type="hidden" id="fecha_entrada" name="fecha_entrada" value=""> </div>
<input type="hidden" id="fecha_salida" name="fecha_salida" value=""> </div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<div> <script src="../js/formulario-candidato.js"></script>
<label for ="nombres">Nombres:</label>
<input type="text" id="nombres" name="nombres" required>
</div>
<div>
<label for="primer_apellido">Primer apellido:</label>
<input type="text" id="primer_apellido" name="primer_apellido" required>
</div>
<div>
<label for="segundo_apellido">Segundo apellido:</label>
<input type="text" id="segundo_apellido" name="segundo_apellido" required>
</div>
<div>
<label for="correo">Correo electrónico:</label>
<input type="text" id="correo" name="correo" required>
</div>
<div>
<label for="telefono">Teléfono:</label>
<input type="number" id="telefono" name="telefono" required>
</div>
<div>
<label for="id_examen">Examen:</label>
<select name="id_examen" id="id_examen" required>
<option value="NULL">Selecciona un examen</option>
</select><br>
</div>
<div>
<label for="id_tipo_id">Tipo de Identificación:</label>
<select name="id_tipo_id" id="id_tipo_id" required>
<option value="NULL">Selecciona el tipo de identificación</option>
</select><br>
</div>
<div>
<label for="id_rango_edad">Rango de edad:</label>
<select name="id_rango_edad" id="id_rango_edad" required>
<option value="NULL">Selecciona un rango de edad</option>
</select><br>
</div>
<div>
<label for="id_genero">Género:</label>
<select name="id_genero" id="id_genero" required>
<option value="NULL">Selecciona un género</option>
<option value="1">Masculino</option>
<option value="2">Femenino</option>
<option value="3">Prefiero no decir</option>
</select><br>
</div>
<br>
<button type="submit">Enviar</button>
<div id="mensaje-error" class="mensaje-error"><p>hola</p></div>
</form>
</main>
<!-- MAIN -->
</section>
<!-- NAVBAR -->
<script src="../js/form.js"></script>
<script src="../js/formulario-candidato.js"></script>
<script src="https://website-widgets.pages.dev/dist/sienna.min.js" defer></script>
</body> </body>
</html> </html>

311
views/formulario-datos-candidato.php
View File

@ -11,242 +11,97 @@ if($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['id_candidato'])){
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html data-bs-theme="light" lang="es-mx">
<head> <head>
<meta charset="UTF-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'> <title>formsLania</title>
<link rel="stylesheet" href="../css/form.css"> <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<title>AdminSite</title>
</head> </head>
<body> <body>
<div class="text-bg-light" style="height: 70px;"><img src="assets/img/logo-lania.png" style="height: 65px;margin: 0px 10px;"></div>
<!-- SIDEBAR --> <div class="card">
<section id="sidebar"> <div class="card-body" style="margin: 0px 30px;">
<a href="inicio.html" class="brand"><i class='bx bx-code-alt icon' ></i> LANIA</a> <!-- ==================== Formulario ==================== -->
<!-- <a href="#" class="brand"> <form style="margin: 0px 50px;" id="formulario-datos-extendido" method="post" action="#">
<img src="img/lania_logo.png" alt="Logo" style="height: 40px;"> <input class="border rounded-pill shadow-sm form-control" type="number" id="id_candidato" value="<?php echo $id_candidato; ?>">
</a> --> <h4>Información geográfica</h4>
<ul class="side-menu">
<li><a href="#"><i class='bx bxs-dashboard icon' ></i> Dashboard</a></li>
<li class="divider" data-text="main">Main</li>
<li>
<a href="#"><i class='bx bxs-inbox icon' ></i> Elements <i class='bx bx-chevron-right icon-right' ></i></a>
<ul class="side-dropdown">
<li><a href="#">Alert</a></li>
<li><a href="#">Badges</a></li>
<li><a href="#">Breadcrumbs</a></li>
<li><a href="#">Button</a></li>
</ul>
</li>
<li><a href="#"><i class='bx bxs-chart icon' ></i> Charts</a></li>
<li><a href="#"><i class='bx bxs-widget icon' ></i> Widgets</a></li>
<li class="divider" data-text="tablas y formularios">Tablas y formularios</li>
<li><a href="#"><i class='bx bx-table icon' ></i> Tablas</a></li>
<li>
<a href="#" class="active"><i class='bx bxs-notepad icon' ></i> Formularios <i class='bx bx-chevron-right icon-right' ></i></a>
<ul class="side-dropdown">
<li><a href="../views/formulario-candidato.html">Registro de candidato</a></li>
<li><a href="../views/formulario-datos-candidato.php">Datos de candidato</a></li>
</ul>
</li>
</ul>
<!-- <div class="ads">
<div class="wrapper">
<a href="#" class="btn-upgrade">Upgrade</a>
<p>Become a <span>PRO</span> member and enjoy <span>All Features</span></p>
</div>
</div> -->
</section>
<!-- SIDEBAR -->
<!-- NAVBAR --> <label class="form-label" for="id_pais" style="margin: 10px 0px 5px;">País</label>
<section id="content"> <select class="border rounded-pill shadow-sm form-select" id="id_pais" value="NULL" required="">
<!-- NAVBAR --> <option value="NULL">Seleccione un país</option>
<nav> <option value="1">México</option>
<i class='bx bx-menu toggle-sidebar' ></i> <option value="2">Otro</option>
<form action="#"> </select>
<div class="form-group">
<input type="text" placeholder="Buscar..."> <label class="form-label" for="codigo_postal" style="margin: 10px 0px 5px;">Código postal</label>
<i class='bx bx-search icon' ></i> <input class="border rounded-pill shadow-sm form-control" type="number" id="codigo_postal" placeholder="Introduzca su código postal" style="margin: 0px 0px;" maxlength="5" disabled="">
</div>
</form>
<a href="#" class="nav-link">
<i class='bx bxs-bell icon' ></i>
<span class="badge">5</span>
</a>
<a href="#" class="nav-link">
<i class='bx bxs-message-square-dots icon' ></i>
<span class="badge">8</span>
</a>
<span class="divider"></span>
<div class="profile">
<img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cGVvcGxlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
<ul class="profile-link">
<li><a href="#"><i class='bx bxs-user-circle icon' ></i> Profile</a></li>
<li><a href="#"><i class='bx bxs-cog' ></i> Settings</a></li>
<li><a href="#"><i class='bx bxs-log-out-circle' ></i> Logout</a></li>
</ul>
</div>
</nav>
<!-- NAVBAR -->
<!-- MAIN --> <button class="btn btn-sm bg-white border rounded-pill border-3 border-dark-subtle shadow-sm" type="button" id="buscarBtn" style="margin: 5px 0px;" disabled="">Buscar</button>
<main>
<h1 class="title">Datos</h1> <label class="form-label" for="id_estado" style="margin: 10px 0px 5px;display: grid;">Estado</label>
<ul class="breadcrumbs"> <select class="border rounded-pill shadow-sm form-select" id="id_estado" disabled="">
<li><a href="#">Formulario</a></li> <option value="NULL">Seleccione su estado</option>
<li class="divider">/</li> </select>
<li><a href="#" class="active">Datos</a></li>
</ul> <label class="form-label" for="id_municipio" style="margin: 10px 0px 5px;">Municipio</label>
<select class="border rounded-pill shadow-sm form-select" id="id_municipio" disabled="">
<option value="NULL">Seleccione su municipio</option>
</select>
<div class="form-container"> <label class="form-label" for="id_colonia" style="margin: 10px 0px 5px;">Colonia</label>
<!-- Formulario --> <select class="border rounded-pill shadow-sm form-select" id="id_colonia" disabled="">
<form id="formulario-datos-extendido" method="post" action="#"> <option value="NULL">Seleccione su colonia</option>
<div class="form-section"> </select>
<br>
<h3>Ubicación</h3>
<br>
<div class="form-row">
<label for="id_candidato">ID del candidato</label>
<input type="number" id="id_candidato" name="id_candidato" value="<?php echo $id_candidato; ?>">
<div class="form-col"> <h4 style="margin: 20px 0px 0px;">Información académica/laboral</h4>
<div class="form-group">
<label for="id_pais" class="required">País</label> <label class="form-label" for="id_nivel" style="margin: 10px 0px 5px;">Nivel de estudios</label>
<select id="id_pais" name="id_pais" required> <select class="border rounded-pill shadow-sm form-select" id="id_nivel" required="">
<option value="NULL">Seleccione su país</option> <option value="NULL">Seleccione su nivel de estudios</option>
<option value="1">México</option> </select>
<option value="2">Otro</option>
</select> <label class="form-label" for="nombre_empresa" style="margin: 10px 0px 5px;">Nombre de su empresa o institución</label>
</div> <input class="border rounded-pill form-control" type="text" id="nombre_empresa" list="sugerencias_ei" placeholder="Introduzca el nombre de su empresa o institución" required="">
</div> <datalist id="sugerencias_ei"></datalist>
<label class="form-label" for="id_giro" style="margin: 10px 0px 5px;">Giro de su empresa o institución</label>
<select class="border rounded-pill shadow-sm form-select" id="id_giro" required="">
<option value="NULL">Seleccione una opción</option>
</select>
<label class="form-label" for="motivo_examen" style="margin: 10px 0px 5px;">Motivo de examen</label>
<select class="border rounded-pill shadow-sm form-select" id="motivo_examen" required="">
<option value="NULL">Seleccione una opción</option>
<option value="Lorem Ipsum">Lorem Ipsum</option>
<option value="Adcnjcafgrf">Adcnjcafgrf</option>
</select>
<div class="form-col"> <h4 style="margin: 20px 0px 0px;">Calificación del servicio</h4>
<div class="form-group"> <label class="form-label" for="calificacion_servicio" style="margin: 10px 0px 5px;">¿Qué tan satisfecho está con nuestra institución, considerando la calidad de las instalaciones, la atención del personal y el proceso de aplicación del examen?</label>
<label for="codigo_postal">Código postal</label> <select class="border rounded-pill shadow-sm form-select" id="calificacion_servicio" required="">
<input type="number" id="codigo_postal" name="codigo_postal" maxlength="5" disabled> <option value="NULL">Seleccione una opción</option>
<br> <option value="1">&#128577 Muy insatisfecho</option>
<input type="button" class="btn" id="buscarBtn" value="Buscar" disabled> <option value="2">&#128533 Insatisfecho</option>
</div> <option value="3">&#128528 Neutral</option>
</div> <option value="4">&#128578 Satisfecho</option>
<option value="5">&#128528 Muy satisfecho</option>
<div class="form-col"> </select>
<div class="form-group">
<label for="id_estado">Estado</label>
<select id="id_estado" name="id_estado" disabled>
<option value="NULL">Seleccione su estado</option>
<!-- Aquí irían los estados desde la base de datos -->
</select>
</div>
</div>
<div class="form-col"> <div class="form-check">
<div class="form-group"> <input class="form-check-input" type="checkbox" id="consentimiento_pub" value="1" checked>
<label for="id_municipio">Municipio</label> <label class="form-check-label" for="consentimiento_pub">Consiento que mis datos personales sean tratados de conformidad con los términos y condiciones informados en el presente <a href="#">aviso de privacidad</a>.</label>
<select id="id_municipio" name="id_municipio" disabled> </div>
<option value="NULL">Seleccione su municipio</option>
<!-- Aquí irían los municipios desde la base de datos --> <input class="btn border rounded-pill border-3 border-primary-subtle shadow btn-lg btn-primary" type="submit" style="margin: 15px 0px;" value="Enviar" name="btnEnviar">
</select> </form>
</div> <!-- ==================== Fin del formulario ==================== -->
</div> </div>
</div>
<div class="form-col"> <script src="../js/formulario-datos-candidato.js"></script>
<div class="form-group"> <script src="assets/bootstrap/js/bootstrap.min.js"></script>
<label for="id_colonia">Colonia</label>
<select id="id_colonia" name="id_colonia" disabled>
<option value="NULL">Seleccione su colonia</option>
<!-- Aquí irían las colonias desde la base de datos -->
</select>
</div>
</div>
</div>
</div>
<!-- Sección 3: Información Académica y Laboral -->
<div class="form-section">
<br>
<h3>Información académica/laboral</h3>
<br>
<div class="form-row">
<div class="form-col">
<div class="form-group">
<label for="id_nivel" class="required">Nivel de Estudios</label>
<select id="id_nivel" name="id_nivel" required>
<option value="NULL">Seleccione una opción</option>
</select>
</div>
</div>
<div class="form-col">
<div class="form-group">
<label for="nombre_empresa">Nombre de la empresa/institución</label>
<input type="text" id="nombre_empresa" list="sugerencias_ei" maxlength="100">
<datalist id="sugerencias_ei"></datalist>
</div>
</div>
<div class="form-col">
<div class="form-group">
<label for="id_giro" class="required">Giro de la empresa/institución</label>
<select id="id_giro" name="id_giro" required>
<option value="NULL">Seleccione una opción</option>
</select>
</div>
</div>
<div class="form-group">
<label for="motivo_examen">Motivo del Examen</label>
<textarea id="motivo_examen" name="motivo_examen" rows="3"></textarea>
</div>
</div>
</div>
<!-- Sección 4: Evaluación y Consentimiento -->
<div class="form-section">
<br><h3>Evaluación</h3><br>
<div class="form-group">
<p>Calificación del servicio</p>
<br>
<label for="calificacion_servicio">Considerando la calidad de las instalaciones, la atención del personal y el proceso de certificación, ¿cuál es su nivel general de satisfacción con nuestra institución?</label>
<br>
<select id="calificacion_servicio" name="calificacion_servicio" class="select-emoji">
<option value="NULL">Seleccione una calificación...</option>
<option value="1">&#128577 Muy insatisfecho</option>
<option value="2">&#128533 Insatisfecho</option>
<option value="3">&#128528 Neutral</option>
<option value="4">&#128578 Satisfecho</option>
<option value="5">&#128528 Muy satisfecho</option>
</select>
</div>
<br>
<div class="form-group">
<input type="checkbox" id="consentimiento_pub" name="consentimiento_pub" value="1" checked>
<label for="consentimiento_pub" style="display: inline;">Consiento que mis datos personales sean tratados de conformidad con los términos y condiciones informados en el presente <a href="#">aviso de privacidad</a>.</label>
</div>
</div>
<br>
<button type="submit" class="btn-submit">Enviar</button>
<div id="mensaje-error" class="mensaje-error"></div>
</form>
</div>
</main>
<!-- MAIN -->
</section>
<!-- NAVBAR -->
<script src="../js/form.js"></script>
<script src="../js/formulario-datos-candidato.js"></script>
<!-- <script src="js/buscarCodigo.js"></script> -->
<script src="https://website-widgets.pages.dev/dist/sienna.min.js" defer></script>
</body> </body>
</html> </html>

21
views/pantalla-salida-form.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html data-bs-theme="light" lang="es-mx">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>formsLania</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="text-bg-light" style="height: 70px;"><img src="assets/img/logo-lania.png" style="height: 65px;margin: 0px 10px;"></div>
<div class="card">
<div class="card-body" style="margin: 0px 30px;">
<h1 class="text-center">¡Gracias por registrarse!</h1>
</div>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>