optional warning message leaving page - javascript

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

Related

Prevent Exit Pop Up Loading After Form Submit

My aim is to have a exit pop up which triggers the window.onbeforeunload if somebody tries to close the current tab or browser. But after they complete a sign up form to opt in to my e-mail list and redirect to my "Thank you page URL", I do not want the exit pop up to show.
I am using a page builder, so the code is not written by myself.
This is the following script I am using:
window.onbeforeunload = function(e) {
return 'Are you sure you want to leave this page? You will lose any unsaved data.';
};
</script>
As for my form, because after the user enters their name and clicks submit, they redirect to a URL and the exit pop is triggering once the redirect begins. I only want the pop to show if they try to leave opting in then disable this after they take that action.
I notice an a class tag with the href="submit-form" My form is also contained in the form target tag if that helps.
How do I implement a script which disables the exit pop up after redirecting to a new page in a HTML sign up form?
Thank you for any insight.
You could achieve that by using if-else statements and setting the event to null if a form is being submitted.
Here is an example
`
window.onbeforeunload = function(e) {
e.preventDefault()
if($('form').submit(){
return null;
}
else{
return 'Are you sure you want to leave this page? You will lose any unsaved data.';
}
}
`
PS: I have not tested it but it should work

How can I warn user on back button click?

www.example.com/templates/create-template
I want to warn users if they leave create-template page. I mean whether they go to another page or to templates.
I use this code to warn users on a page reload and route changes should the form be dirty.
function preventPageReload() {
var warningMessage = 'Changes you made may not be saved';
if (ctrl.templateForm.$dirty && !confirm(warningMessage)) {
return false
}
}
$transitions.onStart({}, preventPageReload);
window.onbeforeunload = preventPageReload
It works as expected on a page reload and route changes if it is done by clicking on the menu or if you manually change it. However, when I click the back button, it does not fire the warning. only it does if I click the back button for the second time, reload the page, or change route manually.
I am using ui-router. When you click back button, you go from app.templates.create-template state to app.templates state.
How to warn if they press Back button?
First of all, you are using it wrong:
from https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload:
Note: To combat unwanted pop-ups, some browsers don't display prompts
created in beforeunload event handlers unless the page has been interacted
with; some don't display them at all. For a list of specific browsers, see the
Browser_compatibility section.
and
window.onbeforeunload = funcRef
funcRef is a reference to a function or a function expression.
The function should assign a string value to the returnValue property of the Event object and return the same string.
You cannot open any dialogs in onbeforeunload.
Because you don't need a confirm dialog with onbeforeunload. The browser will do that for you if the function returns a value other than null or undefined when you try to leave the page.
Now, as long as you are on the same page, onbeforeunload will not fire because technically you are still on the same page. In that case, you will need some function that fires before the state change where you can put your confirm dialog.
How you do that depends on the router that you are using. I am using ui-router in my current project and I have that check in the uiCanExit function.
Edit:
You can keep your preventPageReload for state changes in angular. But you need a different function for when the user enters a new address or tries to leave the page via link etc.
Example:
window.onbeforeunload = function(e) {
if (ctrl.templateForm.$dirty) {
// note that most broswer will not display this message, but a builtin one instead
var message = 'You have unsaved changes. Do you really want to leave the site?';
e.returnValue = message;
return message;
}
}
However, you can use this as below:(using $transitions)
$transitions.onBefore({}, function(transition) {
return confirm("Are you sure you want to leave this page?");
});
Use $transitions.onBefore insteadof $transitions.onStart.
Hope this may help you. I haven't tested the solutions. This one also can help you.

How to have dialogue box appear but without the "Are you sure you want to leave this page?" message in it

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.

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?

How to implement a isDirty flag onLeave for a single page application?

I have a single page application written in MVC4 that uses pjax() to push html into various s in my page. I have one sub-form that allows the user to edit the data and it if the user changes the data an isDirty flag gets set in javascript to trigger an alert at the bottom of the page that there are un-saved updates. I would also like to implement an additional warning when the user tries to leave the page without saving. If I use a traditional onbeforeunload function like this
window.onbeforeunload = function() {
if (isDirty) {
return 'You have unsaved changes!';
}
return null;
};
it calls the alert if I try to close the page or navigate away from the site entirely but if the user clicks on one of my links that re-populates the with some different information it does not trigger because you are not actually leaving the page. How can I architect it so that one of these pjax() links causes an alert similar to if I close the page?
You could subscribe to a global event that fires before a pjax request:
$(document).on('pjax:beforeSend', function() {
if (isDirty) {
return confirm('You have unsaved changes! Are you sure you want to continue?');
}
return true;
});
You could add a delegated event handler onto the links in the page. You just have to make sure the handler is bound to links that may load a "new page".

Categories

Resources