Secciones

Autoguardado de formularios con AJAX

Inicio » Artículos » Autoguardado de formularios con AJAX
La categoría del artículo es
Escrito el 7 March 2008, 19:46


En los últimos días se me ha planteado un problema en el trabajo que consiste en: ¿qué pasa cuando un usuario está rellenando un formulario muy extenso (hablo incluso de horas) y por cualquier motivo, transcurrido un tiempo, la página del formulario se pierde?

La verdad es que es una faena que después de estar introduciendo datos durante mucho tiempo, éstos se pierdan por cualquier motivo así que me puse a idear una forma de guardar los datos introducidos hasta el momento sin que el usuario tenga que hacer nada y después de darle vueltas, la mejor forma que encontré fue hacerlo utilizando AJAX.

La idea es que cada cierto tiempo, en mi caso cinco minutos, se guarden los datos introducidos en el formulario en una base de datos, para en el caso de que se pierda la página, poder recuperarlo sin problemas.

Para ello, utilizaremos la librería Prototype que tiene una clase llamada PeriodicalExecuter, y que su función, como su propio nombre indica, es ejecutar una determinada función cada cierto tiempo. La creación de un objeto de esta clase recibo parámetros: la función a la cual invocar y los segundos que tarde en ejecutarse una nueva instancia.

La función a la cual vamos a invocar creará una instancia Ajax.request, a la cual le debemos pasar por parámetro los valores de los elementos del formulario, el método por el cual se pasan (post o get) y la página que queremos que actúe sobre esos datos (en nuestro un script php). Veamos como quedaría el código en la página que contiene el formulario:

PHP:
<script src="prototype.js" language="javascript""javascript"'guardadatos.php', {
          parameters: { question1: $F('question1'), question2: $F('question2'), question3: $F('question3'), },
          method: 'post'

Hay que tener en cuenta que se debe conocer, que usuario ha introducido esos datos. En mi aplicación, los usuarios que rellenan los formularios son usuarios registrados, con lo que sé en cada momento la identidad del que rellena dicho formulario. Ahora vemos el código del script que almacena la información en la base de datos:

PHP:
span style="color: #ff0000;">"databaseconnection.php");

//Antes de insertar nada, elimino los datos de este usuario
"DELETE FROM datos_guardados WHERE id_user='"'username']."'""INSERT INTO datos_guardados (id_user, element_form, value) VALUES ('"'username']."', '$key', '""')"

Ya sólo nos quedaría añadir el código para que, al cargar el formulario, se compruebe si ese usuario tiene datos almacenados y recuperarlos en los elementos del propio formulario. Pero eso os lo voy a dejar como ejercicio.

¿Crees que este artículo te servirá en tus desarrollos?

your_ip_is_blacklisted_by sbl.spamhaus.org.