Aviso de alterações na página para não perder dados – Javascript

Nesta postagem, vamos mostrar como impedir que seu usuário feche o browser sem salvar os dados digitados. Isto é muito comum em Webmail ou formulários/dados importantes que o usuário digitou e sem querer, muda de página ou a fecha, para evitar que perca as informações utilizaremos esta técnica para alertá-lo e assim, ele tomar a decisão necessária.

O evento que vamos utilizar é o “onBeforeUnload”.

Este evento é sempre invocado quando o usuário tenta sair da página atual, mas, ele por si só não resolve o problema, para resolvermos, precisamos dizer ao browser o que fazer quando isto acontecer.

 

Um exemplo de código seria:

$('body').on('click', function(){
    window.onbeforeunload = function(){
        return 'Os dados do formulário não foram salvos, deseja permanecer nesta página?';
    };
});

 

Desta forma, quando o evento foi setado, ao mudar de página ou qualquer ação que faça ele fechar a página, será enviada uma mensagem ao browser, como o exemplo abaixo:

Então, uma forma de fazer isto em um formulário seria, quando carregar a página salvar o estado do formulário para comparar, caso ele tome alguma ação que saia da página, sendo quê, temos que desconsiderar o “SUBMIT”, pois neste caso a ação é desejada.

Exemplo de código:

$( function(){

	var init_form = $('#id_form').serialize();
	// Result example: "name=&email=&message="

	// Cancel event onbeforeunload when Submit form
	$(':submit').click(function() {
		window.onbeforeunload = null;
	});
	
	window.onbeforeunload = function(){
		var check_form = $('#id_form').serialize();
		
		if( check_form === init_form )
		return null;
		
		return 'Os dados do formulário não foram salvos, deseja permanecer nesta página?';
	};
});

 

Conclusão:

Isto pode ser utilizado para diversas formas, avisar o preenchimento de um formulário não enviado, salvar o rascunho de um e-mail/mensagem, dar um desconto em um produto caso o usuário feche a tela de concluir a compra e outras milhares de formas que vocês imaginarem.

 

Dicas e sugestões:
Deixem nos comentários.