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:

Sintaxi y gramática básica de las variables en javascript
- 385
Javascript es un lenguaje. Tiene una sintaxis y una gramática básicas que hay que aprender. Vemos cuales son estas normas para el caso de las variables en JS y dónde debes hacer hincapié en no equivoc...
Javascript: Estructura básica de un script
- 1542
¿Qué es programar? Programar es indicar a una máquina que siga un conjunto ordenado de instrucciones. Es una acción cotidiana que realizamos sin apercibirnos cuando seguimos una receta de cocina. Y si...
Ejercicio – Generación de una fecha personalizada mediante javascript
- 167
Ejercicio javascript dónde se trabaja con fechas y los métodos para fechas con el objetivo de crear fechas con formato personalizado.
Ejercicio JS – Salva pantallas primitivo con javascript
- 136
Ejercicio de salvapantallas primitivo creado con javascript básico y sin usar la etiqueta canvas. Incluye solución.
Función que crea un objeto y lo almacena en una lista en Javascript
- 684
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...
Acceder y modificar una web con javascript
- 762
Vamos a ver como mediante Javascript podemos interactuar con las etiquetas html que constituyen un documento web. Podemos acceder a una etiqueta, un párrafo, un enlace, una imagen, o incluso a los met...
Como añadir nuevos nodos al DOM usando Javascript
- 776
En esta entrada vemos un tutorial paso a paso sobre como añadir nuevos nodos al DOM mediante Javacript con el ejemplo de un párrafo y el de una imagen.
¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 571
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Eliminar el comportamiento por defecto de un elemento html
- 409
Explicamos como desactivar el comportamiento por defecto de un elemento HTML mediante el uso del método javacript preventDefault()
Estructura condicional switch en Javascript
- 987
Podemos escribir una estructura condicional mediante el if(){}else if(){}else{} o mediante el switch(){}. ¿Cuando usar una opción y no la otra? En esta entrada vemos un ejemplo para el switch y coment...
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.