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

Asked

Viewed 2,866 times

1

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?

  • 1

    This dialog that appears is the browser security so that the sites do not disturb users. There is no way to block 100%, it goes in the task manager and kills the process, the machine is his and it is the Adm, always has a way. There might even be a block beyond what you do, I wouldn’t know what it would be.

  • I got it. What I wanted was something using a modal or dialog, for example the jquery library or the bootstrap, which I set up myself... These I think the user has no way to cheat, but do not know how...

  • Have you ever tried to use? It will be nice to put the code of an attempt, already help to answer.

  • I know how to mount the modal in HTML, the problem is to make it appear when the user clicks on any button other than the save. That I don’t even know how to start...

  • I added to the question the modal structure to see if it helps to resolve the issue.

1 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.

  • Prevent it from leaving the site, I understand that is not possible. But and from it click on some link on my own site, is it possible? For example, it’s on the form page, it fills in something and it’s not saved, and then it clicks on the site’s own menu to switch pages. In this situation, it is possible to prevent?

  • 1

    Yes, in that case you could add a click event to all links: $('a').click(callback); callback would be a function that receives an Event. Event is an object with the preventDefault() function that serves to prevent the click action from continuing.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.