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!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
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.
Practica createElement(), appendChild(), insertBefore() y removeChild() con un documento web lleno de párrafos. Incluye solución.
El desconocimiento hace que a menudo muchos usuarios decidan desactivar la opción de que nuestra navegador acepte y/o interprete este lenguaje de script. ¿Que podemos hacer para avisar a los usuarios ...
¿Estás estudiando javascript o otro lenguaje de programación? Las prisas nunca son buenas para ello. ¿Qué respondo a mis alumnos?
Hasta el momento hemos estado programando mediante secuencias de instrucciones que se iban sucediendo en orden cronológico. Hemos aprendido la sintaxis y vocabulario mínimo necesario del lenguaje java...
Ejercicio javascript en el que se repasa el concepto de acoplamiento y se piden corregir algunos errores típicos.
No hay comentarios