JavaScript: Show warning when leaving the page

In this information, I want to show you how to display a warning if the user is about to leave the page. We will use JavaScript for the implementation.

This can be useful, for example, to prevent users from accidentally closing the browser window if a form has been filled out but not yet sent. But more on that later. First, let's look at how to always display the message.

Show Warning every time when leaving the Page

We can use the following code if we want the notice to appear every time a users leaves our page.

In pure JavaScript (without jQuery) we work with window.onbeforeunload:

window.onbeforeunload = function() {
   return 'Do you really want to leave this page?';
};

With jQuery the same function is looking like that:

$(window).bind('beforeunload', function() {
  return 'Do you really want to leave this page?';
});

Show Warning only if something has been entered

In most cases, a warning is used on pages on which the user has the possibility to fill out a form. However, in this case a warning only makes sense if it is only displayed in case there is really something typed in the form and when the user is about to leave the page via another way than by the form submit button. So, for example, if the tab or browser was accidentally closed or the user clicked on a link and the data entered is in danger of being lost.

In order to cover this case especially, we can extend our script accordingly:

var submitted = false;
var userinput = false;
 
$(document).ready(function() {
  $("form").submit(function() {
    submitted = true;
  });

  $(".userinputs").change(function() {
    userinput = true;
  });
 
  window.onbeforeunload = function () {
    if (userinput && !submitted) {
      return 'You do not have submitted the form yet.\
      Do you really want to leave this page?';
    }
  }
});

First, we define the variables "submitted" (has the submit button been clicked) and "userinput" (has the user typed something into the form). After that, we are extending the window.onbeforeunload function by an if condition: the dialog should only be displayed if the variable "userinput" is "true" and "submitted" is "false". Otherwise, the user can leave the website or page without a warning.

We are setting the variables "submitted" and "userinput" to true when the user is clicking the submit button or if the user changes the content of one of the elements with the class "userinputs". Correspondingly, all elements that should be monitored should have assigned this class or you change the script in a way that it directly refers to the name of the corresponding input fields.