Provide custom message when user leaves window without saving data

Question

Can anybody provide me an custom alert box saying "you are about to leave page and changes will be discarded" Yes/no.

I tried with following code but its giving me default message saying "Changes you made may not be saved"

here is my javascript code

unsaved=true;
window.onbeforeunload = function() { 
    if (unsaved) 
    { 
        var _message = "You currently have unsaved changes!!!\n\nAre you sure you want to exit without saving.\n\nChoose ‘Leave this page’ to exit without saving changes.\nChoose ‘Stay on this page’ to return to the billing profile."; 
        return _message; 
    } 
}

Also I have no form but simple button which I can't include in form, on click of that button also it giving me warning. Here is Fiddle to try, any help really appreciated thank you. I know there are questions asked on this topic earlier but believe me none are working now. update there are some methods explained in previous StackOverflow examples but they dont work now in modern browsers.

What about trying? 1. http://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes 2. http://stackoverflow.com/questions/11844256/alert-for-unsaved-changes-in-form 3. http://stackoverflow.com/questions/155739/detecting-unsaved-changes — Jitesh Sojitra, Aug 23 '16 at 12:32
It appears you cannot change the default message for this window (http://www.w3schools.com/jsref/event_onbeforeunload.asp). What you can do is cancel the event after capturing it, and handle it in the way that suits your app better, giving a dialog so the user can confirm or cancel the operation. — Óscar Gómez Alcañiz, Aug 23 '16 at 12:33
I tried but not working @Jits you can also copy that code in my given fiddle and try — Sudarshan Kalebere, Aug 23 '16 at 12:33
I have seen in my sites and many advertising they ask in different language before leaving window there is a way. — Sudarshan Kalebere, Aug 23 '16 at 12:36
Possible duplicate of [Is it possible to display a custom message in the beforeunload popup?](http://stackoverflow.com/questions/38879742/is-it-possible-to-display-a-custom-message-in-the-beforeunload-popup) — Dekel, Aug 23 '16 at 12:37
@SudarshanKalebere, check the link I flag as duplicated. I gave there already a complete example and notes regarding the most common browsers. — Dekel, Aug 23 '16 at 12:39
You can set a custom alert, but in most common browsers it will mean nothing (and probably in the future this feature will be removed completely). — Dekel, Aug 23 '16 at 12:40
But there are many sites we see like ads they give alert in different langauges also how they make? — Sudarshan Kalebere, Aug 23 '16 at 12:41
It depends on the browser. Note the in IE it still works (also old versions of firefox and chrome). As for websites with ads - my guess is that it is not `onbeforeunload`, but a regular `confirm` that pops after a few seconds (if you have a working example I can take a look). — Dekel, Aug 23 '16 at 12:46
I just want to stop user when has done some changes when my variable is true, can we achieve this with any js function any method? — Sudarshan Kalebere, Aug 23 '16 at 12:50
No, this is the only way. But if you **just want to stop** the user, why do you care about the message? The browser will tell the user that he might have some unsaved changes. — Dekel, Aug 23 '16 at 12:53
If the user have a french browser the message he will see will be in french :) — Dekel, Aug 23 '16 at 12:58
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/121623/discussion-between-dekel-and-sudarshan-kalebere). — Dekel, Aug 23 '16 at 12:58
@SudarshanKalebere, I also added a note regarding the alert/confirm in the answer in the link I gave. You are welcome to upvote the answer if it was helpful. — Dekel, Aug 23 '16 at 13:17
Your ans is good but not helpful for me. I want custom message to show — Sudarshan Kalebere, Aug 23 '16 at 13:26

score 0 · Answer 1 · answered Aug 23 '16 at 12:34

0

There's a method in JavaScript called window.confirm(): https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm

if (window.confirm("Question"))
  console.log('clicked OK');
else
  console.log('clicked cancel');

answered Aug 23 '16 at 12:34

Alien426

1,097
10
12

I want to call that method when user tried to leave window without saving data. – Sudarshan Kalebere Aug 23 '16 at 12:35

score 0 · Answer 2 · answered Aug 23 '16 at 12:36

0

Try this Jquery

$(window).bind('beforeunload', function(){
  return 'Your message here';
});

Javascript

window.onbeforeunload = function(){
  return 'Your message here';
};

answered Aug 23 '16 at 12:36

Kiran Sadvilkar

69
4

here is your result please try in fiddle and then answer please check out your code here it wont work https://jsfiddle.net/stfsze4p/ – Sudarshan Kalebere Aug 23 '16 at 12:38

Provide custom message when user leaves window without saving data

2 Answers2