How to Use onbeforeunload with Form Submit Buttons

— Geekery

While doing some programming I came across an interesting predicament. While I understand it’s evil to make it hard for a user to leave a page, I’m not here to argue the merits (or lack thereof) of onbeforeunload.

On a particular form, we are forcing the browser to not cache the information to avoid potential AJAX/JavaScript problems if they should leave the form and come back as browsers don’t all act the same (eg IE leaves checkboxes checked but doesn’t remember changes that have occurred to the page due to JavaScript). As such, we warn our users when they’re about to leave the order form to let them know they’ll need to fill it in again.

The function was simple enough:

window.onbeforeunload = function () {
    return "You are about to leave this order form. You will lose any information...";
}

Unfortunately, this would also be triggered if the user submitted the form which, is obviously not what we want. After searching around on the Internet I came across a simple solution that I thought I would share:

// Create a variable that can be set upon form submission
var submitFormOkay = false;
window.onbeforeunload = function () {
    if (!submitFormOkay) {
        return "You are about to leave this order form. You will lose any information...";
    }
}

Since onclick appears to register before onsubmit when clicking a submit button, we can add a little variable declaration to our submit button so that submitFormOkay will be set to true before the form submission happens:

<input type="submit" id="submit_button" onclick="submitFormOkay = true;">

Problem solved! I hope this post can help others solve the same issue in the future.

If you liked this post, then please consider subscribing to my feed.

Related Posts

  • Thanks, works great! I knew there was a simple solution to seeing whether or not a form was submitted.

  • kvz

    Instead of using a global state variable, you could also unset the beforeunload instead:

    $form.submit(function() {
    window.onbeforeunload = null;
    });

  • rak

    This isn’t totally correct.

    Because once you click “form submit” & then try to leave page, it won’t warn u. Because “submitFormOkay” is not set to false again. I’ve been spending lot of time to solve that but still I couldn’t find anything. Any solution would help a lot!

  • Martin

    Thanks man

  • Thanks for this, it’s exactly what I needed and saved me a lot of time!

  • I wanted a quick fix to the submit problem so used php:

    var submitFormOkay = false;
    window.onbeforeunload = function () {
    if (!submitFormOkay) {
    return “You are about to leave this page. You will lose any information…”;
    }
    }

    and on the button …. onclick=”submitFormOkay = true;”/>

  • I see it took out the php code!

    Where it says submitFormOkay I added a random number to the end with php.

    Create the random number:
    $random = rand(5, 15);

    …then just echo “$random” after each “submitFormOkay” – you can do this in jquery too

  • I’m not getting it: is there any way to run a php module on onbeforeunload, not just the message window?

  • Himanshu Saraswat

    The workaround mentioned is not foolproof. Once the global variable is set to true the page can easily be refreshed. To overcome this one solution is to make the global variable false on keypress and mousedown event(hoping that the user might do one of the two things). This solution is too not foolproof though. Else there is no way to the onbeforeunload problem in IE

  • Cathy Lin

    Thank you! It really helps me to solve a problem.

  • Vinícius Barcelos de Aquino

    Is never late to thanks for this!

  • Si Hobbs

    This worked for me, thanks.