Show error on pressing back/forward button - javascript

I have a login page,when the logged in user presses the back button ,the page should show error rather than showing login page and same should be applied on the forward button.

window.onbeforeunload event will fire when the user leaves the page.
var prevURL = document.referrer;
window.onbeforeunload = function() {
if(prevURL == 'provide your login page URL here') {
return "Error message"; // alert
//or do whatever you want
}
};
Note that this event will fire when the user leaves the page for anyway.

Related

Open dialog before user leave page js

window.onbeforeunload = function() {
openDialog(dialogs.whyNot)
}
I want to open some dialog before user leave page , I've found that I can show some message before leaving a page by making it like this :
window.onbeforeunload = function() {
return 'Message'
}
But instead of messages I want to show my own dialog , is it possible to make ?
By my own dialog I mean:
No you cannot show anything like a custom dialog when the page starts unloading. You have to use the standard alert box.
window.onbeforeunload = function() {
window.alert('Message');
}
You could try alert, if all you want is for the user to press OK:
window.onbeforeunload = function() {
window.alert('Message');
}
If you want OK/Cancel buttons, you can use confirm (the window prefix can be dropped). Confirm will return True if the user clicked OK, False if the user clicked Cancel. Here is an example:
window.onbeforeunload = function() {
if(confirm('Message')){
console.log('user clicked ok');
} else {
console.log('user clicked cancel');
}
}
Edit (after question edit):
You will need to do a modal popup with html and css, see here for an example:
https://www.w3schools.com/howto/howto_css_modals.asp
For a jquery example see here:
How to display Custom Dialog box on button click

optional warning message leaving page

With the code below i warn the user "leaving page" unless the user presses the send button.
But if the user fills in no form boxes, can i stop "leaving page" warning?
No form box is filled in + send button is pressed = no warningAny form box is filled in or the user wants to leave the page or go back= show "leaving page" warning
var warning = true;
window.onbeforeunload = function() {
if (warning) { return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";
}
}
$('form').submit(function() {
window.onbeforeunload = null;
});
If you need to base the behavior on the contents of the form elements, you'll need to either check their contents or listen to changes in their contents to configure your unload behavior.
Checking the form contents is probably fastest, since you'll only need to do it in the case the user actually tries to navigate away, you won't need to manage a bunch of listeners on all the form elements (and have them firing events you no longer care about once the user has started modification).

show js alert on certain conditions

I would like to know how I can display an javascript alert in the following 3 conditions:
the reload button from the browser is clicked
Reloading the page with a keybort shortcut (e.g. CMD + R)
Leaving the actual page by clicking on links on the page.
The user should be able to cancel the reload in the alert window.
try onbeforeunload which opens a prompt box for the user
window.onbeforeunload = function() {
return "noooooo... dont go";
}
the return value will be displayed as the prompt text, if the user clicks the confirm button, the window continues with the navigation - and stops the navigation if the user chooses cancel
example in action

Alert user for unsaved changes in page within panels using jquery

I have a situation here, i need to stop the user if user has left some unsaved changes on the page.
I got some information over the internet for moving from current page to other page like
var warnMessage= "You have unsaved changes";
$('input:not(:button,:submit),textarea,select').change(function () {
window.onbeforeunload = function () {
if (warnMessage != null) return warnMessage;
};
});
$('input:submit').click(function(e) {
warnMessage = null;
});
This works fine when we are closing tab or URL is getting changed.
I have panels on my page as like three different panels;each with a Submit, Cancel and Reset. Now, i need to alert the user when it happens to open a panel; last panel has unsaved changes then user should be alerted
If he/she has some unsaved changes on the panel, submit/reset/cancel button is clicked then also it should confirm by the user.
Is this possible?

Detect if javascript dialog button clicked and redirect

Hey guys, I am showing a javascript dialog box to user using window.onbeforeunload to handle if user clicks back button.
My code is working to a point, but I am struggling to redirect the user if they click 'Leave this page' (Message varies in different browsers).
// Set check var false to begin with
// This is set true on submit btns using onclick event
submitFormOkay = false;
// If we are on check-availability page
if( window.location.href.indexOf( 'check-availability' ) != -1 )
{
// If back button is clicked
window.onbeforeunload = function()
{
// Only show dialog if submit btn wasn't clicked
if (!submitFormOkay)
{
// Show dialog
return "Use of the browser back button will lose form data.\nPlease use the 'Previous' button at the bottom of the form.";
// If 'leave' this page was clicked'
// do 'window.location = window.location'
}
}
}
Thanks in advance.
David
If they click "Leave this page" then the browser will complete whatever action the user was trying to perform before the dialog popped up.
But if they do navigate Back, they will still be on your site, right? So you can just do whatever you need to do when that page is re-requested (providing it's not cached).
In other words ... detect on server-side if the user has clicked Back, and then do whatever you would have done if they had clicked Previous.

Categories

Resources