Tenho uma página HTML que possui um formulário. Preciso impedir que, após o usuário preencha esse formulário, ele clique em outro botão qualquer da página que não seja o "Salvar".
Encontrei um script que resolveu isso, porém ele pode ser burlado facilmente. Nesse script, aparece um dialog padrão do navegador, e nesse dialog possui uma checkbox onde o usuário pode marcar para que a página não crie novas dialogs. Após testar, vi que quando se marca essa checkbox, o script não funciona mais e o usuário consegue sair da página sem salvar o formulário.
Abaixo o script que usei:
var init_form = $('#processosForm').serialize();
$(':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 alterados ainda não foram salvos, deseja permanecer nesta página?';
};
Gostaria de saber alguma outra forma de se ter esse mesmo resultado, porém sem a possibilidade do usuário burlar. A alternativa pode ser em javascript puro... ou jquery... não tenho restrições em relação à isso.
A minha ideia é criar um modal (Jquery ou Bootstrap) e quando o usuário clicar em qualquer outro botão da tela que não seja o "salvar", esse modal apareceria. A estrutura do modal seria basicamente assim:
<!-- Modal -->
<div class="modal fade" id="confirmaSaida" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Tem certeza de que deseja sair dessa tela?</h4>
</div>
<div class="modal-body">
Você tem dados que ainda não foram salvos. Clique em "Salvar" antes de sair dessa página.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Sair sem salvar</button>
</div>
</div>
</div>
O problema é: como fazer esse modal aparecer quando o usuário clicar noutros botões da tela?