Ejercicio JS – Formulario con un campo oculto

Ejercicio JS – Formulario con un campo oculto

0
(0)

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.

Ejercicio JS - Formulario con un campo oculto 1

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!

Puntuación media 0 / 5. Votos: 0

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No Comments

Post A Comment

  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.