Alto Código: JavaScript: formulario en pantalla

Vamos a crear un formulario sencillo en HTML capturando el nombre, apellidos y edad. Al pulsar al botón enviar conseguiremos que aparezca en pantalla junto al formulario en una zona que con un recuadro con borde punteado.

Disponemos de tres versiones que difieren en la forma en la que mostramos en pantalla los datos recogidos por el formulario.

El objetivo es crear los siguientes elementos.

Formulario con nombre, apellidos, edad
Botón de enviar formulario: evento submit
Mostrar datos por pantalla

Versión 1

https://repl.it/@valoro/JS-formulario1

HTML

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>Capturar formulario</title>  
   <script type="text/javascript" src="script.js"></script>  
   <link href="style.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
   <h1>Mostrar datos del formulario en pantalla</h1>  
   <div class="box">  
    <form action="#" method="POST" id="formulario" onsubmit="return false">  
     <p>  
      <label for="nombre">Nombre:</label>  
      <input type="text" name="nombre" id="nombre" value="Ana"/>  
     </p>  
     <p>  
      <label for="apellidos">Apellidos:</label>  
      <input type="text" name="apellidos" id="apellidos" value="Ruiz"/>  
     </p>  
     <p>  
      <label for="edad">Edad:</label>  
      <input type="number" name="edad" id="edad" value="23"/>  
     </p>  
     <p>  
      <input type="submit" value="Enviar" id="submit" />  
     </p>  
    </form>  
   </div>  
   <div class="box dashed">  
    <h3>Información del usuario</h3>  
    <hr>  
   </div>  
  </body>  
 </html>

JavaScript

 'use strict'  
 window.addEventListener('load',function(){  
  console.log("DOM cargado");  
  var formulario=document.querySelector("#formulario");  
  var box_dashed=document.querySelector(".dashed");  
  box_dashed.style.display="none";  
  formulario.addEventListener('submit',function(){  
   console.log("Evento submit capturado");  
   var nombre=document.querySelector('#nombre').value;  
   var apellidos=document.querySelector('#apellidos').value;  
   var edad=document.querySelector('#edad').value;  
   box_dashed.style.display="block";  
   console.log(nombre,apellidos,edad);  
   //Método 1  
   var parrafo =document.createElement('p');  
   parrafo.append(nombre+" ");  
   parrafo.append(apellidos+" ");  
   parrafo.append(edad);  
   box_dashed.append(parrafo);  
  });  
 });

CSS

La palabra dashed significa línea punteada.

 .box{  
  width: 200px;  
  height: 200px;  
  float: left;  
  margin: 20px;  
 }  
 .dashed{  
  border: 5px dashed black;  
  padding: 20px;  
 }

Versión 2

Con la versión 2 logramos escribir los tres datos en tres párrafos creados dentro del recuadro.

https://repl.it/@valoro/JS-formulario2

HTML

Es el mismo código que el de la versión 1.

JavaScript

 'use strict'  
 window.addEventListener('load',function(){  
  console.log("DOM cargado");  
  var formulario=document.querySelector("#formulario");  
  var box_dashed=document.querySelector(".dashed");  
  box_dashed.style.display="none";  
  formulario.addEventListener('submit',function(){  
   console.log("Evento submit capturado");  
   var nombre=document.querySelector('#nombre').value;  
   var apellidos=document.querySelector('#apellidos').value;  
   var edad=document.querySelector('#edad').value;  
   box_dashed.style.display="block";  
   console.log(nombre,apellidos,edad);  
   //Método 2  
   var datos_usuario=[nombre,apellidos,edad];  
   for (let indice in datos_usuario){  
    var parrafo =document.createElement('p');  
    parrafo.append(datos_usuario[indice]);  
    box_dashed.append(parrafo)  
   }  
  });  
 });

CSS

Es el mismo código que el de la versión 1.

Versión 3

https://repl.it/@valoro/JS-formulario3

HTML

El código es similar a los anteriores salvo en la zona final donde hemos añadido un comentario denominado: 'Tres párrafos añadidos para el Método 3'. En esa zona se incluyen tres párrafos con sus id correspondientes para nombre, apellidos y edad.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>Capturar formulario</title>  
   <script type="text/javascript" src="script.js"></script>  
   <link href="style.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
   <h1>Mostrar datos del formulario en pantalla</h1>  
   <div class="box">  
    <form action="#" method="POST" id="formulario" onsubmit="return false">  
     <p>  
      <label for="nombre">Nombre:</label>  
      <input type="text" name="nombre" id="nombre" value="Ana"/>  
     </p>  
     <p>  
      <label for="apellidos">Apellidos:</label>  
      <input type="text" name="apellidos" id="apellidos" value="Ruiz"/>  
     </p>  
     <p>  
      <label for="edad">Edad:</label>  
      <input type="number" name="edad" id="edad" value="23"/>  
     </p>  
     <p>  
      <input type="submit" value="Enviar" id="submit" />  
     </p>  
    </form>  
   </div>  
   <div class="box dashed">  
    <h3>Información del usuario</h3>  
    <hr>  
    <!-- Tres párrafos añadidos para el Método 3 -->  
    <p id="p_nombre">  
     Nombre: <span></span>  
    </p>  
    <p id="p_apellidos">  
     Apellidos: <span></span>  
    </p>  
    <p id="p_edad">  
     Edad: <span></span>  
    </p>  
   </div>  
  </body>  
 </html>

JavaScript

 'use strict'  
 window.addEventListener('load',function(){  
  console.log("DOM cargado");  
  var formulario=document.querySelector("#formulario");  
  var box_dashed=document.querySelector(".dashed");  
  box_dashed.style.display="none";  
  formulario.addEventListener('submit',function(){  
   console.log("Evento submit capturado");  
   var nombre=document.querySelector('#nombre').value;  
   var apellidos=document.querySelector('#apellidos').value;  
   var edad=document.querySelector('#edad').value;  
   box_dashed.style.display="block";  
   console.log(nombre,apellidos,edad);  
   //Método 3  
   var p_nombre = document.querySelector('#p_nombre span');  
   var p_apellidos = document.querySelector('#p_apellidos span');  
   var p_edad = document.querySelector('#p_edad span');  
   p_nombre.innerHTML=nombre;  
   p_apellidos.innerHTML=apellidos;  
   p_edad.innerHTML=edad;  
  });  
 });

CSS

Es el mismo código que el de la versión 1.

Versión 4

La versión 4 incluye control de errores. Si no se escribe un nombre, un apellido o una edad numérica mayor que cero saltará un error avisando con un alert e indicando en la página la palabra Error en color rojo.

https://repl.it/@valoro/JS-formulario4

HTML

Hemos incluido:

un  con id="error_nombre" para el nombre
un  con id="error_apellidos" para los apellidos
un  con id="error_edad" para la edad

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>Capturar formulario con validación</title>  
   <script type="text/javascript" src="script.js"></script>  
   <link href="style.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
   <h1>Mostrar datos del formulario en pantalla</h1>  
   <div class="box">  
    <form action="#" method="POST" id="formulario" onsubmit="return false">  
     <p>  
      <label for="nombre">Nombre: <span id="error_nombre"></span></label>  
      <input type="text" name="nombre" id="nombre" value="Ana"/>  
     </p>  
     <p>  
      <label for="apellidos">Apellidos: <span id="error_apellidos"></span></label>  
      <input type="text" name="apellidos" id="apellidos" value="Ruiz"/>  
     </p>  
     <p>  
      <label for="edad">Edad: <span id="error_edad"></span></label>  
      <input type="number" name="edad" id="edad" value="23"/>  
     </p>  
     <p>  
      <input type="submit" value="Enviar" id="submit" />  
     </p>  
    </form>  
   </div>  
   <div class="box dashed">  
    <h3>Información del usuario</h3>  
    <hr>  
    <p id="p_nombre">  
     Nombre: <span></span>  
    </p>  
    <p id="p_apellidos">  
     Apellidos: <span></span>  
    </p>  
    <p id="p_edad">  
     Edad: <span></span>  
    </p>  
   </div>  
  </body>  
 </html>

JavaScript

Hemos creado tres condicionales if con su else correspondiente para el control de errores del nombre, de los apellidos y de la edad.

El método trim() elimina los espacios vacíos en ambos extremos de un string.

Hemos dejado comentada una línea de código en el else del control de errores del nombre que hace un .style.display='none' ya que en principio si parecía conseguir que la palabra error desapareciera en caso de no existir error pero dejaba ese estilo de forma permanente y si se chequeaba un segundo error la palabra 'Error' en rojo ya no aparecía porque estaba desactivado el display.

Para conseguir nuestro objetivo hemos optado por .innerHTML="" donde dentro del span no escribimos nada. Pero es necesario que lleve su código HTML con su id incluido ya que si el .innerHTML fuera simplemente un vacío "" habríamos eliminada la etiqueta span y al realizar un segundo error el control de errores no funcionaría.

 'use strict'  
 window.addEventListener('load',function(){  
  console.log("DOM cargado");  
  var formulario=document.querySelector("#formulario");  
  var box_dashed=document.querySelector(".dashed");  
  box_dashed.style.display="none";  
  formulario.addEventListener('submit',function(){  
   console.log("Evento submit capturado");  
   var nombre=document.querySelector('#nombre').value;  
   var apellidos=document.querySelector('#apellidos').value;  
   var edad=parseInt(document.querySelector('#edad').value);  
   var error_nombre=document.querySelector('#error_nombre');  
   var error_apellidos=document.querySelector('#error_apellidos');  
   var error_edad=document.querySelector('#error_edad');  
   if(nombre.trim()==null || nombre.trim().length==0){  
    alert("El nombre no es válido");  
    error_nombre.innerHTML="<span id='error_nombre'> Error</span>";  
    error_nombre.style.color="red";  
    return false;  
   }else{  
    //document.querySelector('#error_nombre').style.display='none';  
    error_nombre.innerHTML="<span id='error_nombre'></span>";  
   }  
   if(apellidos.trim()==null || apellidos.trim().length==0){  
    alert("Los apellidos no son válidos");  
    error_apellidos.innerHTML="<span id='error_apellidos'> Error</span>";  
    error_apellidos.style.color="red";  
    return false;  
   }else{  
    error_apellidos.innerHTML="<span id='error_apellidos'></span>";  
   }  
   if(edad==null || edad<=0 || isNaN(edad)){  
    alert("La edad no es válida");  
    error_edad.innerHTML="<span id='error_edad'> Error</span>";  
    error_edad.style.color="red";  
    return false;  
   }else{  
    error_edad.innerHTML="<span id='error_edad'></span>";  
   }  
   box_dashed.style.display="block";  
   console.log(nombre,apellidos,edad);  
   var p_nombre = document.querySelector('#p_nombre span');  
   var p_apellidos = document.querySelector('#p_apellidos span');  
   var p_edad = document.querySelector('#p_edad span');  
   p_nombre.innerHTML=nombre;  
   p_apellidos.innerHTML=apellidos;  
   p_edad.innerHTML=edad;  
  });  
 });

CSS

Es el mismo código que el de la versión 1.

Alto Código

Páginas

viernes, 30 de agosto de 2019

JavaScript: formulario en pantalla

Versión 1

HTML

JavaScript

CSS

Versión 2

HTML

JavaScript

CSS

Versión 3

HTML

JavaScript

CSS

Versión 4

HTML

JavaScript

CSS

No hay comentarios:

Publicar un comentario