00 Votes

JavaScript: Show warning when leaving the page

Info by Stefan Trost | Last update on 2021-04-30 | Created on 2016-11-07

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.

ReplyPositiveNegative

About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile

 

Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own article on askingbox.com. That’s how it’s done.