How can I create an alert box when a browser refresh button or back button is clicked in php?
This may be a duplicate question, but there is one thing I need to know and I haven't been able to find it on other questions.
How can I open an alert box when the Refresh Browser button is clicked, but not any other buttons like the home page etc. that redirect the page to another page?
I managed to make a warning window 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 the home button that loads the page to another page, the alert box still fires up. I only need an alert box for the BROCHURE refresh and return button.
Any help is greatly appreciated. Thank you in advance.:)
UPDATE
This is the code that works with jsfiddle.net, but not 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 are - is this why this doesn't work in my browser, but works from jsfiddle.net? Is there something I missed? Customize something, etc.? Thank.
JSFIDDLE LINK: http://jsfiddle.net/bawvu7yy/4/
source to share
Determining what was clicked to trigger navigation is only possible if the clicked button exists in your document. Assuming this home button is an item in the document in question, perhaps you can use a flag to track if this button was clicked.
// 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.';
}
};
This way the popup only happens when something else triggers the page navigation.
EDIT: I have provided a working demo on jsfiddle . The link does not trigger the popup, but the other two buttons, which behave exactly like back and refresh, activate the popup. In this update , it is clicked = true;
commented out and it shows that the popup starts to appear for the Home button when it is not running.
SECOND EDIT: You are using the script before this element exists. Move the tag <script>
with JavaScript inside the bottom <body>
.
source to share