SummArg | Cursos y recursos para webmasters

26/02/2012

Alertar al usuario antes de salir de la página sin enviar el formulario

En formularios muy largos puede ser recomendable colocar un tipo de alerta antes de salir de la página sin enviar la información para prevenir que accidentalmente el usuario pierda la información ingresada. También suele resultar útil en formularios específicos de aplicaciones online en donde se edita o ingresa información.

Lo que nos interesa en esta oportunidad es emitir el alerta cuando el usuario quiera cerrar la ventana o cambiar a otra URL, pero que la misma no aparezca luego de enviar el formulario que en nuestro caso tiene el ID #contactform (modifiquen de acuerdo al ID del formulario en cuestión). Recuerden vincular jQuery al documento y antes del cierre de la etiqueta </body> coloquen:

<script type="text/javascript">
 $(window).bind('beforeunload', function(){
 return 'Guarden los datos antes de continuar, de lo contrario perderán los cambios';
 });
 $('#contactform').submit(function(){
 $(window).unbind('beforeunload');
 return false;
 });
 </script>

Resultado:

Dejar un comentario

  1. El ejemplo es muy bueno, sin embargo no consigo hacer que funcione ya que al enviar el formulario también me muestra el mensaje, he incluido la versión mas reciente de JQuery y por lo visto no es el error.

    No se si deba agregar un evento “onclick” en el “input type=submit” del form.

    Espero me puedan ayudar.

    Saludos desde México.

  2. Tampoco consigo que funcione. ¿Tienes tu HTML que funciona para compararlo? Gracias

Dejar un comentario