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

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');
} }
?> ?>

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";

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

After

(image error) Size: 257 KiB

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>

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>

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>