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:
En este ejercicio repasamos los conceptos relativos a la declaración de variables en javascript. ¿Qué declaraciones son incorrectas? Detéctalas y corrígelas.
Ejercicio con solución dónde se genera un dado de 6 caras y se tira el dado 1000 veces para comprobar cuantas veces ha salido cada tirada.
Ejercicio javascript dónde se inhabilitan todos los enlaces al cargar una web. Al hacer click en un botón se activan de nuevo. Incluye solución.
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Ejercicio introductorio a los eventos javascript dónde se limpia un documento html para que no aparezcan eventos en línea con el html mediante addEventListener(). Incluye solución.
Resumimos como eliminar nodos del DOM mediante javascript y siguiendo una estrategia sencilla mediante .removeChild()
No Comments