How to create an alert box when the browser's refresh or back button is clicked in php?

Question

This may be a duplicate question but there is one thing I need to know and I wasn't able to find it on any other questions.

How can I pop up an alert box when the browser's refresh of back button is clicked but not any other buttons like homepage, etc. that refirects the page to another page?

I was able to make an alert box using this code:

<script type="text/javascript">
    window.onbeforeunload = function() {
        return 'If you resubmit this page, progress will be lost.';
    };
</script>

But when I click on my homepage button, which loads the page to another page, the alert box still triggers. I need the alert box only for the refresh and back button of the BROWSER.

Any help is very much appreciated. Thanks in advance. :)

UPDATE

This is the code that works with jsfiddle.net but not with my browser.

<html>
<head>
<script>
    var btn = document.getElementById('homepage'),
    clicked = false;

    btn.addEventListener('click', function () {
    clicked = true;
    });

    window.onbeforeunload = function () {
    if(!clicked) {
    return 'If you resubmit this page, progress will be lost.';
    }
    };
</script>
</head>

<body>
    <form method="post" action="something.php" name="myForm">
        <input type="submit" name="homepage" value="Please Work" id="homepage" href="something.php">
    </form>
</body>
</html>

Now my questions is what can be the reason why it's not working in my browser but works with jsfiddle.net? Is there something that i missed? Something to configure, etc? Thanks.

JSFIDDLE LINK: http://jsfiddle.net/bawvu7yy/4/

this can't be done, because in order to tell if they were refreshing, going back, or going somewhere else, you would need to know the url they were attempting to go to, and this is impossible http://stackoverflow.com/questions/1686687/how-can-i-get-the-destination-url-in-javascript-onbeforeunload-event — chiliNUT, Jan 12 '15 at 03:25
@user4035 ``return`` shows a popup when passed a ``String`` inside the ``onbeforeunload`` event in the ``window``. Reference: [MDN window.onbeforeunload](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers.onbeforeunload) — Patrick Roberts, Jan 12 '15 at 03:31

Patrick Roberts · Accepted Answer · 2015-01-12T08:05:09.687

2

Determining what was clicked on to trigger navigation is only possible if the button clicked on exists within your document. Assuming this "homepage" button is an element in the document in question, perhaps you can use a flag to keep track of if that button was clicked on.

// assume that the homepage button has an id "homepage".
var btn = document.getElementById('homepage'),
    clicked = false;

btn.addEventListener('click', function () {
  clicked = true;
});

window.onbeforeunload = function () {
  if(!clicked) {
    return 'If you resubmit this page, progress will be lost.';
  }
};

That way the popup only happens when anything else causes the page navigation.

EDIT: I've provided a working demo on jsfiddle of this. The link does not trigger the popup, but the other two buttons which behave exactly like "back" and "refresh", do trigger the popup. In this update, clicked = true; is commented out and this shows that the popup begins to appear for the Home button as well when this is not executed.

SECOND EDIT: You're running the script before the element exists. Move the <script> tag with the JavaScript inside to the bottom of the <body>.

edited Jan 12 '15 at 08:05

answered Jan 12 '15 at 03:25

Patrick Roberts

49,224
10
102
153

I understand what you are trying to say but I don't have enough knowledge to put it to work. Knowing which button was clicked is the right approach. I tried your answer but it does not work. It just refreshes without alert box on all buttons. – Nek Jan 12 '15 at 03:43
That's because your code probably threw an error, since I'm guessing you don't have a button with the id "homepage". You're going to have to provide more information about this homepage button if you want example code that actually works. – Patrick Roberts Jan 12 '15 at 03:45
I edited my code before trying your code and I'm pretty sure everything is fine, except that now it does not show the alert. – Nek Jan 12 '15 at 03:49
Here is the code for my homepage. – Nek Jan 12 '15 at 03:51
Sorry for the late reply. Here is pretty much everything that has something to do with the homepage button. see http://jsfiddle.net/hLd4jush/ for the code. – Nek Jan 12 '15 at 06:13
Oh really.. It's my first time using it. I'm sorry. I don't know what else you need but that's the code i have. my button's id is homepage. I think that's the only requirement for me to run your code but for some reason it's not working. I'm still figuring out how to do this. Thanks for your effort good sir and sorry for the trouble. :) – Nek Jan 12 '15 at 06:41
Your code works when I put it to jsfiddle.net Please see link for a sample I am doing http://jsfiddle.net/bawvu7yy/ But when I try this program on my browser, it does not work. What can be the problem with it? Thanks if you're still there. – Nek Jan 12 '15 at 07:51
Finally! It worked! This was sorted thanks to your help. Sorry for taking a bunch of your time Sir. Accepted your answer. :) – Nek Jan 12 '15 at 08:10

score 0 · Answer 2 · answered Jan 12 '15 at 03:19

0

Just use window.onbeforeunload function in javascript use the code below.

<script type="text/javascript">
     window.onbeforeunload = function() { return "Are you sure you want to leave?"; }
</script>

Hope this helps you

answered Jan 12 '15 at 03:19

Utkarsh Dixit

4,267
3
15
38

That's exactly what he already has... that doesn't answer the question. – Patrick Roberts Jan 12 '15 at 03:27
This will pop the messge on ANY button click! – Noam B. Jan 20 '19 at 12:42

How to create an alert box when the browser's refresh or back button is clicked in php?

2 Answers2