onbeforeunload

Discussion in 'NZ Computing' started by Lawrence D'Oliveiro, Sep 19, 2009.

  1. Here's a nifty HTML feature: suppose you've set up a complex Web form, where
    the user can make a lot of changes, and you want to guard against the
    possibility that they might accidentally close the window/tab or navigate
    away from the page, thereby losing all those changes before saving them.
    Turns out it's quite easy to trigger a warning that this is about to happen,
    giving the user a chance to change their mind.

    All you have to do is attach a function to the window.onbeforeunload
    attribute for the page, which returns a message string to be displayed in
    the confirmation warning. For example, suppose you have the following
    JavaScript functions defined in the page:

    function SomethingChanged()
    /* makes sure the user will get a warning before page closes. */
    {
    window.onbeforeunload = function() { return "You haven't saved your changes."; }
    } /*SomethingChanged*/
    function ClearSomethingChanged()
    /* clears warning before page closes. */
    {
    window.onbeforeunload = null
    } /*ClearSomethingChanged*/

    Then in every control on the page, when its value changes, make sure to call
    SomethingChanged, e.g.

    <LABEL><INPUT TYPE="CHECKBOX" NAME="check1" VALUE="1" ONCLICK="SomethingChanged()">Checked</LABEL>

    Except for the actual "Save Changes" button--this one needs to call
    ClearSomethingChanged before submitting the form--otherwise the user gets
    the warning when they're _not_ going to lose their changes!

    <BUTTON TYPE="BUTTON" ONMOUSEUP="ClearSomethingChanged(); document.forms[&quot;theform&quot;].submit()">Save Changes</BUTTON>
     
    Lawrence D'Oliveiro, Sep 19, 2009
    #1
    1. Advertising

  2. In message <h92ggf$9is$>, Lawrence D'Oliveiro wrote:

    > <LABEL><INPUT ...>Checked</LABEL>


    By the way, this addresses one of my pet peeves with a lot of websites: if
    you just place text next to an INPUT checkbox or radio button, like so:

    <INPUT TYPE="CHECKBOX" ...>labeltext

    then you must click only on the checkbox or radio button, you can't click on
    the label text. In order to make the label text clickable, wrap the whole
    thing in a LABEL tag:

    <LABEL><INPUT TYPE="CHECKBOX" ...>labeltext</LABEL>

    This gives the user a much bigger--and easier--target to click on. And once
    they get used to having this, they will get very annoyed with sites that
    don't do it. Help spread the annoyance, people!
     
    Lawrence D'Oliveiro, Sep 19, 2009
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. paora

    onbeforeunload - ie event handler

    paora, Aug 7, 2004, in forum: NZ Computing
    Replies:
    2
    Views:
    1,057
    paora
    Aug 7, 2004
Loading...

Share This Page