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?
Related
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.
I have a page that you are able to save notes.
If a user writes some notes without saving it and tries to navigate away, the dialogue box appears alerting the user that the changes will be lost unless you save it.
The message is as follows:
"You have unsaved changes in the Notes section. Please save your changes or they will be lost. Are you sure you want to leave this page?"
This scenario is fine. However there is a submit buttons on the page (that submits a form), and if the user clicks on the submit button the dialogue box appears with that same message.
In this scenario I want the same message to appear but without the "Are you sure you want to leave this page?". I don't seem to have any control over it. When the submit button is clicked, the same page appears after the form is submitted, which is why I don't want that part of the message to appear.
How do I remove the "Are you sure you want to leave this page?" part of the message?
window.onbeforeunload = function (e) {
var lastClickedElement = document.activeElement;
var submitButtonOne = document.getElementById("submitButton1");
var submitButtonTwo = document.getElementById("submitButton2");
if (!lastClickedElement.isEqualNode(submitButtonOne)) {
if (lastClickedElement.isEqualNode(submitButtonTwo)) {
if ($('#notesTextBox').val() !== currentText) {
return 'I want this dialogue box not to contain "Are you sure you want to leave this page?"';
}
}
if ($('#notesTextBox').val() !== currentText) {
return 'You have unsaved changes in the Notes section. Please save your changes or they will be lost.';
}
}
return null;
};
Explanation of code above - When the window.onbeforeunload is fired and the user is actually trying to navigate away from the page I want the message to appear. When the window.onbeforeunload is fired and if submitButton1 was clicked, I dont want it to do anything. When the window.onbeforeunload is fired and submitButton2 was clicked I want it display the message without the "Are you sure you want to leave this page?" part.
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).
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
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.