Develop Reference

Alert user before leaving web page with unsaved changes on form

I have forms in my application, all in one page, and I change them on button click without refreshing page.
How can I secure the form in such a way that if someone navigates away, change form or closes the browser tab, they should be prompted to to confirm they really want to leave the form with unsaved data?
Yes I know about onbeforeunload event, but it wouldn't work if I change form without refreshing page
Hope someone understand me, and can help with an advice
P.S. I work with svelte

Whether there was a navigation or not is irrelevant, you just have to react to changes, e.g. you can handle a change event on the form-level to add the beforeunload handler which adds the confirmation question.
Something like:
<script>
function onChange() {
window.addEventListener('beforeunload', e => {
e.preventDefault()
return e.returnValue = "Are you sure you want to exit?";
});
}
</script>
<form on:change={onChange}>
...
</form>
(Maybe add a flag & if to prevent adding duplicate listeners.)
The change event only captures common interactions with native input elements. If the event is stopped from reaching the form (or whatever container you add the listener on) this will not work. It will also not capture more complex logic, like adding an item to some list.
Depending on your concrete code, you may need to handle additional/different events or changes.
If you use a client-side router of some kind you also have to signal to it, that it should not navigate away because beforeunload will not be triggered. How this is done depends entirely on the router being used.

Is it possible to acquire the users response from IE "NATIVE" dialog boxes triggered by onbeforeunload event handler

I have a scenario where I need to capture the response received from a dialog box INVOKED by IE from an onbeforeunload event handler. The dialog box is a familiar one,
"Are you sure you want to navigate away from this page? You will lose any unsaved modifications to this document. Press OK to continue or Cancel to stay on the current page."
I will emphasize for the sake of anyone misinterpreting this question, that the dialog box I am interested in capturing is THE BROWSER's dialog window, NOT a dialog window that one might create using a third party library such as JavaScript, Telerik or etc. as the source.
I am really not that concerned with capturing a click of the OK button (although it would be a plus) but more concerned with the clicking of the Cancel button because it requires more than simply retaining the user on the current page and our company would like to implement some additional logic on click of the Cancel button.
I believe I have diligently searched all resources available inclusive of Stack Overflow but I cannot find any specific answer or information regarding how to acquire the handle on the dialog and determine which button the user clicked.
Since our companies primary browser for this application is IE, the question is only with respect to IE. Can this be done and if so, where might I find the appropriate documentation or acquire a lead? Seeing as I haven't found any definitive answer to date, I am presuming it is not possible but would like others responses to this.
EDITED:
This question is specific to acquiring the users input (Using IE's Native Dialog or the Browser's native prompt). E.g. Again, Not Dialog boxes or Prompts developed by (You) as the Developer.
NOTE: --> There is a very significant difference in that developing with a Third Party library you as the Developer already have a reference to the object because YOU create it. Whereas you don't have an obvious handle to a Dialog Box created by the Browser.

You can't actually get the result of what was clicked, but you can use setTimeout in your onbeforeunload event to run some code if the user chooses to stay on the page.
For example:
var afterStayFunction = function() {
$("body").append("Thanks for staying.");
};
$(window).on("beforeunload", function(e) {
var prompt = "Are you sure you want to leave?";
e.returnValue = prompt;
setTimeout(function() { afterStayFunction(); });
return e.returnValue;
});
Live example here

How to get callback from user cancelling dialog to select mobile-app after clicking on a link?

I am working with HTML on mobile-devices and want to offer map-routing-functionality.
On mobile devices it makes sense to offer the use the local app, and this is working fine - I do that with changing the
location.href
Is it possible to get any result from the device-dialog?
I want to forward the user to another function, if he is canceling the dialog-box without selecting an app.

Create an event handler for the cancel button, would be the most obvious solution to me. But I am not sure if I understand your problem.

Is there an event for the browser's back button being pressed?

I am supporting an e-commerce app, which pretty much makes and submits orders.
A user found that if they submit their order, and press back really quickly, they can cause an error condition.
I want to prevent this. When the user clicks submit, I want to bind some kind of event to the browser's back button that instead will redirect them to the Index page. However, after about two hours of Googling (including a few StackOverflow topics), I have not found any clear way of influencing the behavior of the back button.
I briefly attempted to use history.pushState(), but as the HTML 5 documentation mentions, that will not cause a redirect; it merely alters the displayed URL/state.
Similarly, the history.onpopstate event appears unhelpful, because it occurs whenever a state is removed from the history listing; I'm looking for an event that occurs whenever the history listing is traversed backwards.
Question: Does an event for the browser's back button, or at least a way to prevent this particular stupid user trick exist?

You can't listen to the browser back button because it's outside of your reach (it's not part of the DOM).
What you can do is fix the previous page so that it detects if you've used the back button.
Without more information I can't give you any tips on how to achieve that.
Also, an error condition is not necessarily a bad thing. Just make sure it's clear what is happening: the error message should make sense.

Wrong answer...
Instead listen to window.onBeforeUnload and ask the user if he knows what he is doing. Return false if not. This is usually done via a confirm dialogue

JS: Implementing custom 'Are you sure you want to leave this page' modal dialog

I know this is probably have been discussed before, but I wonder how Facebook actually implements this feature successfully - in https://www.facebook.com/messages/new:
When composing a message and then trying to press the 'Back' button in the browser, I get facebook's own custom dialog which verifies that I really want to leave the page.
I know I can use beforeunload event to bring up a native dialog, but how do I create my own custom one, like Facebook's.
I figured that one way is probably using jQuery and run an event on the entire set of links.
But how does it work for everything else (like the 'Back' button in the browser, for instance).
I figured it may have something to do with pushState control, or the fact that facebook probably uses some client side framework, and when pressing 'Back' I don't actually UNLOAD the window.
anyways, would be happy to get some info regarding this issue.

It's just HTML, CSS and JS. In the case of a composing a message, which is really just a form, set your beforeunload event and check to see if any of the form fields have been filled in. If so, show your custom html. Maybe this can help you get started: http://jsbin.com/ronuyo/1/