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:
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 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.
Javascript es un lenguaje basado en el uso de objetos. Los objetos son recursos que nos permiten agrupar un conjunto de propiedades alrededor de una idea común. Un constructor es un tipo especial de f...
¿Estás estudiando javascript o otro lenguaje de programación? Las prisas nunca son buenas para ello. ¿Qué respondo a mis alumnos?
En este ejercicio vemos de forma práctica si la suma de valores numéricos o strings resulta en una suma o una concatenación.
Un ejemplo de switch(){} en Javascript bien construido y otro con un pequeño pero grave error explicado paso a paso.
No Comments