Ir al contenido

Programación en JavaScript/Formularios

De Wikilibros, la colección de libros de texto de contenido libre.
← ClasesJS Gestión de formularios Cómo escribir código en JavaScript →


Una de las utilidades más interesantes de JavaScript es la posibilidad de comprobar y gestionar formularios de forma que podamos incluso evitar que se envíe un formulario si los datos no son correctos. Primero estudiaremos como controlar la gestión y el envío de datos, y después nos sumergiremos en la comprobación propiamente dicha de los datos.

Gestión del formulario de datos

[editar]

Cuando tenemos un formulario de datos que queremos enviar a un servidor para su correspondiente gestión por parte de una aplicación CGI, resulta muy interesante en ocasiones tener la posibilidad de comprobar la integridad de los datos antes de ser enviados al servidor. Además, tener la posibilidad de evitar el envío del formulario nos permite un mayor control sobre su gestión. Veamos el siguiente ejemplo: 

 <form action="prog.php" method="post" name="formu" id="formu" 
       onsubmit="return comprobar()">
    Tu nombre: <input type="text" name="nombre" value="">&lt;br&gt;
    Tu edad:   <input type="text" name="edad" value="" size="2" maxlength="2">&lt;br&gt;
               <input type="submit" value="   Enviar   ">
 </form>

Podemos apreciar en el formulario que hemos añadido un atributo nuevo, el evento onsubmit, que permite llamar a una función creada por nosotros para comprobar los datos que vamos a enviar. La expresión 

return comprobar()

hará que el contenido de onsubmit sea true o false, dependiendo de lo que devuelva la funcion comprobar(). Si el valor es true, los datos se enviarán al servidor, y si es false, se retendrá la ejecución del formulario. A continuación estudiaremos una posible función que podemos usar en este caso: 

<script language="javascript">
function comprobar()
{
   var nombre = document.formu.nombre.value;
   var edad = document.formu.edad.value;

   if (nombre.length > 30)
   {
      alert("Tu nombre es demasiado grande. Redúcelo.");
      return false;
   }
   
   if (edad >= 20 && edad <= 40)
   {
      alert("Si tienes entre 20 y 40 años, no puedes usar este programa.");
      return false;
   }
   
   return true;
}
</script>

Este script lo podemos colocar tanto en <head> como en <body>. Como estudiaremos ahora, realiza una serie de comprobaciones automáticas que impedirán o no la ejecución y envío del formulario.

Lo primero que hacemos es definir dos variables que contendrán el valor de los dos controles del formulario que queremos controlar. Para comprender esto, estudiemos las expresiones: 

var nombre = document.formu.nombre.value;

Definimos la variable nombre, que será igual a la expresión "valor del control nombre del formulario formu del objeto de JavaScript document". Es decir, podemos acceder a cualquier parte del documento por medio de sus nombres (o identificadores, según el navegador), y concretamente a los componentes de un formulario de la forma en que aparece en el ejemplo. Así, una vez que hemos obtenido los valores, podemos procesar esos valores, como aparece en el ejemplo.

Un detalle a tener en cuenta es que en el caso de que efectivamente la situación dé lugar a un error (en este ejercicio, hemos realizado las condiciones para que sean ciertas si efectivamente se produce un error en los datos), la función devolverá false, lo que bloqueará el envío del formulario al servidor. Sólo si se superan las dos pruebas que ponemos a los datos, se devolverá true y el formulario se enviará. El código completo para este programa sería: 

<html>
<head>
<script language="javascript">
function comprobar()
{
   var nombre = document.formu.nombre.value;
   var edad = document.formu.edad.value;

   if (nombre.length > 30)
   {
      alert("Tu nombre es demasiado grande. Redúcelo.");
      return false;
   }
   
   if (edad >= 20 && edad <= 40)
   {
      alert("Si tienes entre 20 y 40 años, no puedes usar este programa.");
      return false;
   }
   
   return true;
}
</script>
</head>
<body>
<form action="prog.php" method="post" name="formu" id="formu" 
      onsubmit="return comprobar()">
   Tu nombre: <input type="text" name="nombre" value=""><br>
   Tu edad:   <input type="text" name="edad" value="" size="2" maxlength="2"><br>
              <input type="submit" value="   Enviar   ">
</form>
</body>
</html>

Vamos a estudiar una serie de casos particulares que se alejan de alguna forma de la forma de obtener valores que hemos visto en el ejemplo anterior, o alternativas sobre como comprobar los datos. En el siguiente ejemplo vemos como capturar el contenido de una serie de "radios", ya que podemos usar una función específica para comprobar que efectivamente hemos pulsado uno de los "radios": 

<html>
<head>
<script language="javascript">
function check(browser)
{
   document.formu.respuesta.value = browser;
}
</script>
</head>
   
<body>
<form name="formu" id="formu">
   Selecciona tu navegador favorito:<br><br>
   <input type="radio" name="browser" onclick="check(this.value)" 
          value="Internet Explorer"> Internet Explorer<br>
   <input type="radio" name="browser" onclick="check(this.value)" 
          value="Netscape"> Netscape<br>
   <input type="radio" name="browser" onclick="check(this.value)" 
          value="Opera"> Opera<br>
   <br>
   <input type="text" name="respuesta" size="20">
</form>
</body>
</html>

Fijémonos en las etiquetas <input>: el evento onclick contiene una llamada a la función check, cuyo parámetro es una cadena de texto. En este caso la cadena de texto es conseguida por medio de la expresion this.value. ¿Por qué this.value? Ya conocemos lo que significa this, es la llamada al propio objeto, en este caso el "radio", y con esta expresión leemos el valor de la etiqueta <input>. Con el objeto por defecto this, podemos acceder a cualquer propiedad y función de la etiqueta en la que nos encontramos en sus códigos de eventos.

En el próximo ejemplo veremos como procesar los checkboxes de un formulario. Debemos tener en cuenta que cada grupo de checkboxes pueden tener el mismo nombre, por lo que el acceso a un grupo de estas etiquetas debe ser realizado por medio de una matriz, como veremos ahora. Además, no accederemos a la propiedad value para determinar cual está pulsada, si no a la propiedad checked, que es un valor booleano que nos indicará si efectivamente un checkbox concreto está pulsado o no. 

    <html>
    
    <head>
    <script type="text/javascript">
    function check()
    {
            cafe=document.formu.cafe;
            respuesta=document.formu.respuesta;
            txt="";
            for (i=0;i<cafe.length;++i)
            {
                    if (cafe[i].checked)
                    {
                            txt=txt + cafe[i].value + " ";
                    }
            }
    
            respuesta.value="Tu quieres café con " + txt;
    }
    </script>
    </head>
    
    <body>
    <form name="formu" id="formu">
    ¿Cómo quieres tu café?&lt;br&gt;&lt;br&gt;
    <input type="checkbox" name="cafe" value="crema">Con crema&lt;br&gt;
    <input type="checkbox" name="cafe" value="azúcar">Con azúcar&lt;br&gt;
    &lt;br&gt;
    <input type="button" name="test" onclick="check()" value="Enviar pedido">
    &lt;br&gt;&lt;br&gt;
    <input type="text" name="respuesta" size="50">
    </form>
    </body>
    
    </html>

Como podemos ver, hay varias cosas a tener consideración: los checkboxes, al tener el mismo nombre (podrían tenerlo distinto, pero este ejemplo nos permite ver esta posibilidad), se agrupan en forma de matriz, y por lo tanto, debemos recorrer la lista de controles para acceder a sus contenidos. En nuestro caso, accedemos a la propiedad checked, que nos permite saber si el checkbox está pulsado (true) o no (false). En la variable "txt" acumulamos los valores de los checkboxes (a los que accedemos por medio del correspondiente índice, como ya sabemos), y después mostramos el resultado en la linea de texto que hay más abajo. Al introducir el texto en la propiedad value, cambiamos también el contenido del campo de texto.

En el siguiente ejemplo veremos como averiguar el dato pulsado en una lista de datos: 

    <html>
    <head>
    <script type="text/javascript">
    function cual()
    {
            txt=document.formu.lista.options[document.formu.lista.selectedIndex].text;
            document.formu.favorito.value=txt;
    }
    </script>
    </head>
    
    <body>
    <form id="formu" name="formu">
    Elige tu navegador favorito:
    <select name="lista" onchange="cual()">
            <option>Internet Explorer</option>
            <option>Netscape</option>
            <option>Opera</option>
    </select>
    &lt;br&gt;&lt;br&gt;
    Tu navegador favorito es: <input type="text" name="favorito" size="20">
    </form>
    </body>
    
    </html>

La expresión 

    document.formu.lista.options[document.formu.lista.selectedIndex]

nos permite acceder a una de las opciones (es una matriz) de la lista de datos. En este caso, como las opciones no tienen valor, podemos acceder a la cadena de caracteres de la opción por medio de la propiedad text. En concreto, podemos conocer qué elemento se ha seleccionado por medio de la propiedad selectedIndex del control de lista. Sólo un detalle más a tener en cuenta: por un defecto de los navegadores, no es posible elegir sin más el elemento actualmente seleccionado en la lista, ya que no producirá ningún evento. Hay que tener esto en consideración para evitar posibles problemas a la hora de trabajar con las listas. Un truco para subsanar este inconveniente es poner un primer option en blanco (<option> </option>) que será el que aparezca al cargarse el select.

← ClasesJS Gestión de formularios Cómo escribir código en JavaScript →


Obtenido de «https://es.wikibooks.org/w/index.php?title=Programación_en_JavaScript/Formularios&oldid=411635»