Secciones

Evitar perder los datos de un formulario

Inicio » Artículos » Evitar perder los datos de un formulario
La categoría del artículo es
Escrito el 11 November 2008, 22:26


Inspirándome en un plugin para Textpattern llamado wet_parachute, cuya funcionalidad es evitar perder los datos introducidos en los artículos sin haberlos enviado, se me ocurrir añadir esa posibilidad en uno de las aplicaciones en las que estoy trabajando.

La idea es conseguir que, cuando un usuario está rellenando un formulario e intente cambiar de página sin haberlo enviado, se le muestre una advertencia pidiéndole confirmación para saber si realmente desea abandonar dicho formulario. Para ello, se puede hacer uso de una función de los navegadores, que aunque no es estándar, parece que lo soportan tanto Internet Explorer como Mozilla Firefox, con lo que de momento me vale, puesto que el resto de usuarios de otros navegadores no se verán afectados. Dicha función se llama onbeforeunload y tiene la capacidad de realizar acciones ante cualquier acción del usuario que determine el cambio de página.

¿Cómo conseguimos esto?

En primer lugar, debemos incluir antes de la etiqueta body de nuestro código HTML el siguiente fragmento de código:

Javascript:
<script type="text/javascript">
        var parachute = true;
        window.onbeforeunload = function(e) {
                if (parachute)
                        return "Todavía no has mandado el formulario";
        };
</script>

Con esto conseguiremos que cuando el usuario intente abandonar el formulario sin haberlo enviado, se le muestre una advertencia. Ahora bien, esta advertencia, también aparece cuando el usuario pulsa el botón de Enviar, lo que no sería eficiente. Para evitar esto, utilizamos la variable parachute que se pondrá a cierto cuando le demos al botón Enviar. Este es el código de la función Continuar, invocada al hacer clic sobre el botón Enviar:

Javascript:
<script language="javascript">
function Continuar(){
parachute = false;
if (confirm('¿Seguro que deseas enviar ahora el formulario?'))
        document.formi.submit();
}
</script>

De esta forma tan sencilla, nos evitaremos excusas como, es que le di al intro sin querer o no se que ha pasado, pero mi página web se perdió.


Espero tus comentarios...

  1. # meix, May 5, 08:02 PM:

    Genial,

    Todos estos blogs y foros donde os dedicáis a poner granitos de conocimientos son verdaderamente útiles,

    Gracias!

Ayuda Textile