Ejercicio JS – Formulario con un campo oculto

Ejercicio JS – Formulario con un campo oculto

Print Friendly, PDF & Email
Ejercicio JS – Formulario con un campo oculto
Valora esta entrada
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:

Ejercicio – Programación de una ventana infinita cansina en JS
- 118
Ejercicio que pregunta iterativamente el color del caballo blanco de santiago hasta que se resuelve. Incluye solución.
Ejercicio – ¿Estamos en fin de semana?
- 119
Ejercicio dónde se resuelve un simple ejercicio mediante el uso de getDay() y se compara un switch y un if. Incluye solución.
LibrosWeb ahora es UniWebSidad
- 56
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
La etiqueta noscript
- 309
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 ...
Scope de las variables en javascript
- 324
En esta entrada vamos a hablar sobre el ámbito (scope) de las variables en javascript. Voy a suponer que ya sabes declarar y usar funciones y que  también tienes claro el concepto de variable y su sin...
Como modificar el destino de todos los enlaces de una web con javascript
- 138
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 – ¿Qué declaraciones de variables son erróneas en JS?
- 144
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 – Acoplamiento de javascript en un documento web
- 198
Ejercicio y solución de un problema introductorio al mundo del Javascript.
¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 286
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Javascript: Acoplamiento
- 576
En entradas anteriores hemos visto el origen de javascript como una de las aportaciones de Netscape a la web y como un lenguaje muy útil para aprender a programar. Este lenguaje de script nos permite ...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.