Mostrar contenido con Javascript

0

Llevo unos días aprendiendo Javascript y la verdad es que es bastante sencillo (si sabes programar).

Hoy voy a enseñaros algo de lo más útil que he aprendido hasta el momento (apenas acabo de comenzar a utilizarlo); cómo mostrar más contenido con javascript.

Como es un tutorial algo extenso para mostrarlo entero, lo pongo tras el salto, así será más cómodo de leer.

Supongamos que tenemos un formulario como este:

PLAIN TEXT
HTML:
  1. <form id="formulario">
  2.     Introduce tu nombre:
  3.     <input id="nombre" name="nombre" type="text" />
  4.     ¿Desea introducir más datos?
  5.     <select id="selector">
  6.         <option value="No">No</option>
  7.         <option value="Si">Si</option>
  8.     </select>
  9. </form>

Nos mostraría algo así como:

Introduce tu nombre:

¿Desea introducir más datos?

Pero lo que queremos en realidad es que si el usuario dice que "Si" quiere insertar más datos se nos visualicen más cajas de texto donde insertar esos datos, ¿no?

Veamos cómo quedaría el HTML:

PLAIN TEXT
HTML:
  1. <form id="formulario">
  2.     Introduce tu nombre:
  3.     <input id="nombre" name="nombre" type="text" />
  4.    
  5.     ¿Desea introducir más datos?
  6.     <select id="selector">
  7.         <option value="No">No</option>
  8.         <option value="Si">Si</option>
  9.     </select>
  10.     <div id="masElementos" style="display: none;">
  11.         Apellidos:
  12.         <input id="apellidos" name="apellidos" type="text" />
  13.         Número de teléfono:
  14.         <input id="numtelefono" name="numtelefono" type="text" />
  15.     </div>
  16.     <input class="enviar" type="submit" value="Enviar" />
  17. </form>

Como podeis ver hemos añadido una capa (div) con el id "masElementos" que por defecto está oculta (style="display:none;"); es decir, no se mostrará ese contenido.

Ahora bien, como hemos dicho anteriormente, nosotros queremos que se muestre ese contenido si el usuario selecciona "Si" en el selector, para ello utilizaremos javascript.

Crearemos tras el código HTML (tras la etiqueta </html> de nuestro código) lo siguiente:

PLAIN TEXT
JAVASCRIPT:
  1. <script type="text/javascript">
  2.     function muestraMas(){
  3.         var var1=document.getElementById('selector').value;
  4.         var var2=document.getElementById('masElementos');
  5.         if(var1=="Si"){
  6.             var2.style.display="block";
  7.         }
  8.         else{
  9.             var2.style.display="none";
  10.         }
  11.     }
  12. </script>

Esto no es más que una función que toma el valor escogido en nuestro selector (lo guarda en var1) cada vez que cambia (evento "onChange" de la etiqueta select) y comprueba si el usuario seleccionó "Si"; de ser así cambia la propiedad CSS "display" de la capa "masElementos" a "block" (visible).

Es importante colocar la llamada a dicha función en el evento "onChange" del selector, pues de no ser así no sucederá nada.

Podeis ver un ejemplo aquí

Entradas relacionadas

Deja un comentario

Volver arriba