onBeforeUnload custom button messages

Question

I have the following beforeunload function which I have stolen from sonewhere else....

$().ready(function() {
    $(\"#posManagerLoginForm\").trigger(\"submi         


        

Answer 1

The reason you're still getting redirected is because you're actually doing nothing to prevent it.

If you want to open an alert box before the form gets submitted, make sure the default behaviour is prevented (which is to submit the form), then redirect after OK has been clicked like this:

$().ready(function() {
    $("#posManagerLoginForm").submit(function( event ) {
        event.preventDefault();
        alert("Press 'OK' to go to Reporting Manager home");
        window.location = "home.htm";
    });
});

Though not sure what the use of this would be. If you wanted to stay on the form if a different button is pressed (say 'Cancel' for example), then you'd rather want to use a 'confirm' like this:

$().ready(function() {
    $("#posManagerLoginForm").submit(function( event ) {
        event.preventDefault();
        if confirm(("Press 'OK' to go to Reporting Manager home"))
            window.location = "home.htm";
    });
});

You could replace the alert or confirm with a custom dialog box too, depending on what library you're using. Just make sure you put window.location = "home.htm" inside the dialog's function, otherwise it will execute immediately.

As an example, you may want to have a look into jQuery UI's dialog here: https://jqueryui.com/dialog/

Answer 2

You cannot override the styling of the onbeforeunload dialog. Believe me, I tried this before in my earlier projects.

Reference: http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx

It is built into the browser object, and you have no control over it.

You can however set your own dialog to show when the onbeforeunload event triggers, but it will not disable that the regular one will show. Quite annoying, yes.