How to prevent the user from closing a page without submitting the form, but without using a dialog?

Question

I have an HTML page that has a form. I need to prevent that, after the user fills this form, they click any other button on the page other than "Save".

I found a script that solved this, but it can be swindled easily. In this script, a default browser dialog appears, and in this dialog there is a checkbox where the user can check so that the page does not create new dialogs. After testing, I saw that when you check this checkbox, the script no longer works and the user can leave the page without saving the form.

Below the script I used:

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?';
};

I would like to know some other way of having this same result, but without the possibility of the user to cheat. The alternative may be in pure javascript... or jquery... I have no restrictions on that.

My idea is to create a modal (Jquery or Bootstrap) and when the user clicks on any screen button other than "save", this modal would appear. The modal structure would be basically like this:

<!-- 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">&times;</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>

The problem is: how to make this modal appear when the user clicks on other screen buttons?

Answer 1

There is no way to prevent the user from leaving your site, as this would stop the browser from responding. The only way to stop the execution of the browser is with the native browser dialog window - and all newer browsers have the option to disable it for security (to prevent abuse).

The action is like this: The user requests exit of the page => the output function onbeforeunload is triggered, the return value within that function defines the message of the output confirmation dialog.

What can be done is an infinite loop in the onbeforeunload function so that it does not return, but in safe browsers only the tab will be locked, and it will still be possible to forcibly close the locked tab.