26 Dic Ejercicio JS – Formulario con un campo oculto
Este ejercicio se basa en un caso real de un centro de estudios.
El centro en cuestión tenía el típico formulario de contacto con el plugin contact form 7 de wordpress.
Tenía un asunto desplegable para que los padres pudieran seleccionar el motivo de la consulta.
- Pedir información
- Apuntar el hijo a un curso
- Otros
También había un textarea para que los padres indicaran informaciones relacionadas. Por ejemplo el nombre del curso de interés.
Sin embargo, a menudo los padres que seleccionaban el curso se olvidaban de indicar cuál.
En este ejercicio se crea un formulario con un campo oculto que se muestra cuando el visitante a la web seleccione la opción del formulario que nos interese.
Vamos a repasar los siguientes conceptos:
- Creación de un formulario con html
- Asignación de eventos javascript con addEventListener()
- Modificar estilos con javascript.
Vamos a repasarlo mediante un ejercicio.
Enunciado
Crea un formulario web que pida el nombre, email y un asunto.
El asunto debe ser seleccionable entre las opciones pedir información, apuntarse a un curso, otros.
Cuando se seleccione la opción apuntase a un curso automáticamente se mostrará un cajetín de texto que pedirá explícitamente al usuario que indique a que curso se quiere apuntar.
Este cajetín llevará un label con el texto curso y tendrá un borde de color rojo.
Solución del ejercicio
El formulario es un formulario normal y corriente pero con la salvedad de tener un input inicialmente oculto.
Mediante javascript controlaremos que cuando se seleccione la opción de apuntarse a un curso su display pase a block y que cuando sea cualquier otra opción pase a display:none;
Para ello asignaremos un evento especial al campo <select>.
¿Como queda el documento html?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="Francesc Ricart">
<title>Formulario con campos ocultos</title>
<link rel="stylesheet" href="formulario.css">
</head>
<body>
<div class="container">
<form action="#" class="formulario">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" placeholder="Escribe tu nombre" id="nombre">
<label for="email">Email:</label>
<input type="text" name="email" placeholder="Escribe tu email" id="email">
<label for="asunto" id="test">Asunto:</label>
<select name="asunto" id="asunto">
<option value="info">Solicitar información</option>
<option value="curso">Apuntarse a un curso</option>
<option value="otro">Otro motivo</option>
</select>
<label for="cursoInput" id="cursoLabel">Curso:</label>
<input type="text" name="curso" placeholder="Escribe el nombre del curso" id="cursoInput">
<label for="mensaje">Escribe un mensaje:</label>
<textarea name="mensaje" id="mensaje"></textarea>
</form>
</div>
<script src="functions.js"></script>
</body>
</html>¿Como queda el documento formulario.css?
body{padding:100px;}
*{
box-sizing:border-box;
margin:0;
padding:0;
}
.container{
width:100%;
max-width:300px;
padding:10px;
border:1px solid #000;
border-radius:10px;
margin:auto;
background-color:#A9CEF4;
}
.formulario label{
display:block;
font-weight:bold;
}
.formulario input,.formulario select,.formulario textarea{
padding:5px;
width:100%;
margin:16px 0;
}
.formulario textarea{
resize:none;
height:120px;
}
#cursoInput{
border:2px solid #ff0000;
display:none;
}
#cursoLabel{
display:none;s
}¿Como queda el documento functions.js?
window.addEventListener("load",init);
function init(){
document.getElementById("asunto").addEventListener("change",revisar);
}
function revisar(){
if(document.getElementById("asunto").value=="curso"){
document.getElementById("cursoInput").style.display="block";
document.getElementById("cursoLabel").style.display="block";
}else{
document.getElementById("cursoInput").style.display="none";
document.getElementById("cursoLabel").style.display="none";
}
}¡Hola!
Querido lector,
Puedes descargar la solución de este ejercicio en este enlace.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Entradas relacionadas:
Serie de ejercicios resueltos del tutorial Javacript. Uso básico del DOM. Incluye el repaso básico de teoria a leer y explicación.
Repasamos las distintas formas que existen de asociar eventos javascript a etiquetas html. Ya sea por acoplamiento directo o como evento semántico. Comparamos también con addEventListener()
¿Estás preparando un examen javascript? Comparto el último examen JS (nivel básico) del curso de confección y publicación de páginas web (IFCD0110)
Ejercicio con solución de la serie ejercicios javascript puro dónde se muestra como modificar el href de todos los enlaces de una web.
Ejercicio con solución dónde se usa setInterval y el posicionamiento relativo y absoluto de una caja html. Serie de ejercicios javascript.
Ejemplo de programación de un script que devuelve una hora con formato personalizado hh:mm:ss.
No Comments