CODEWITHSUNDEEP
javascripthtml
Nek
Nek

Reputation: 241

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

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/

Upvotes: 3

Views: 6170

Answers (2)

Patrick Roberts
Patrick Roberts

Reputation: 51826

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

Upvotes: 2

Utkarsh Dixit
Utkarsh Dixit

Reputation: 4275

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

Upvotes: 0

Related Questions