martes, 27 de agosto de 2013

Botón predeterminado en formularios con un sólo campo

Lo que sigue puede parecer una tontería, pero esta "tontería" me ha hecho perder casi dos horas haciendo pruebas y buscando por la web, además de hacerme maldecir en todos los idiomas que conozco y alguno inventado.

Y la solución la he encontrado por casualidad, así que podría haber sido peor. Aquí os lo pongo por si os pasa algo así.

PRIMER CASO


Supongamos que queremos desarrollar un formulario HTML con UN PAR DE CAMPOS, que será procesado por una página en PHP (por simplificar, voy a hacer que la misma página de acción sea la que contiene al formulario). La tarea parece fácil, ¿verdad? Algo así:

Página f1.php
 1 <html>
 2 <head>
 3 <title>Form con 2 campos</title>
 4 </head>
 5 <body>
 6     <form action='f1.php' method='post'>
 7         Dato 1 <input type='text' name='dato1'>
 8         Dato 2 <input type='text' name='dato2'>
 9         <input type='submit' name='submit' value='Enviar'>
10     </form>
11 <?php
12 if (isset($_POST['submit'])) {
13     $dato1 = $_POST['dato1'];
14     $dato2 = $_POST['dato2'];
15     echo "Datos [$dato1] y [$dato2]";
16 }
17 ?>
18 </body>
19 <html>

Como véis, he obviado el control de errores en los datos, si están vacíos, etc...

Ahora lo probamos insertando un par de datos y terminamos PULSANDO con el ratón el botón "Enviar". El resultado es el mensaje de nuestro maravilloso algoritmo:


Fig. 1: Maravilloso algoritmo

Si a alguien le parece más cómodo (a mí sí) pulsar la tecla INTRO al terminar de introducir el dato 2, observará que el resultado es exactamente el mismo. Es decir, al navegador tanto le da que pulsemos INTRO como que hagamos clic en el botón "Enviar". Hasta aquí todo bien.

SEGUNDO CASO

Ahora hagamos una copia de esta página con un pequeño cambio, eliminando el dato 2 y dejando el código como sigue:

Página f2.php
 1 <html>
 2 <head>
 3 <title>Form con 1 campo</title>
 4 </head>
 5 <body>
 6  <form action='f2.php' method='post'>
 7   Dato 1 <input type='text' name='dato1'>
 8   <input type='submit' name='submit1' value='Enviar'>
 9  </form>
10 <?php
11 if (isset($_POST['submit1'])) {
12  $dato1 = $_POST['dato1'];
13  echo "Dato [$dato1]";
14 }
15 ?>
16 </body>
17 <html>

Si al insertar el dato 1 hacemos clic en el botón "Enviar", todo funciona como antes:
Fig. 2: Maravilloso algoritmo simplificado

Pero si en vez de eso, hacemos la opción cómoda, o sea, pulsar INTRO al terminar de teclear el dato 1, resulta que la salida que obtenemos es, extrañamente, esta:

Fig. 3: ¡Juro por Snoopy que yo he pulsado INTRO!

Es decir, el resultado es exactamente igual que si no hubiera pulsado nada, y simplemente hubiera recargado la página sin enviar datos.

Hmmm... bien raro, ¿no? Visto ahora aquí, con este par de ejemplos tan sencillos, la cosa está más o menos clara y parece muy fácil, pero a mí me ha tenido loco un buen rato. Yo quería, por supuesto, por orgullo profesional, que, aunque la página funcionara haciendo clic sobre el botón, también existiera la opción de pulsar INTRO al teclear el dato. Y, claro, esto no estaba funcionando como yo esperaba.

LA PISTA DE LA EXPLICACIÓN

Tras un buen rato de búsqueda, y leer en veinte mil sitios cómo se hace un formulario HTML y cómo se procesa, he encontrado este texto que me ha dado la pista:

Fig. 4 El botón SUBMIT no siempre es necesario (oh my god!)

Supongo que esto vendrá en la especificación oficial de HTML. Aunque siempre se recomienda leerla, reconozco que hacerlo puede ser muy tedioso, y no es habitual que casi nadie lo haga. Normalmente aprendes HTML siguiendo algún curso o tutorial y los detalles los vas conociendo en aquellos aspectos específicos que te van haciendo falta. En mi caso, hasta ahora siempre había trabajado con formularios de dos o más campos, así que no me había encontrado antes con este problema.


Bien. Entonces, he comprobado que en ese caso, cuando el formulario SOLO TIENE UN CAMPO con datos de entrada, el botón "Enviar" no se establece a nada, es decir, la condición

if (isset($_POST['submit1']))

se hace falsa.

LA SOLUCIÓN

Obviamente, pues en vez de comprobar si se ha establecido algún valor para el botón submit (o como comprobación ADICIONAL, combinada en un OR con la anterior), se puede comprobar si se ha introducido algún dato en el único campo, es decir, algo así:

if (isset($_POST['dato1']))

Y esta condición ya sí que se hace cierta en el caso de que se pulse INTRO al terminar de escribir el dato. De hecho, he comprobado que si elimino el botón submit del formulario, al pulsar INTRO también se hace el envío POST. Hmmm, ¿sería buena idea no poner un botón "Enviar" en un formulario con un único campo de texto? Por un lado, la interfaz de usuario se simplifica al máximo, pero por otro, puede despistar... no sé.

¿Y tú? ¿Has estado alguna vez perdiendo el tiempo por tonterías tan insignificantes como esta? ¿Hay que leerse las especificaciones al detalle antes de ponerse a currar, o hay que darse estos "coscorrones" de vez en cuando y meterlos en esa bolsa que llamamos experiencia?

Si te apetece, deja tus comentarios.
Related Posts Plugin for WordPress, Blogger...