logo

Remind users to save their forms

Continuing my trend of articles trying to show how web-applications can be made more user friendly, this article introduces another common feature to the web-app.

Almost all applications have some sort of prompt to alert the user if they try to leave before they have saved their work (Even the Notes Client has this functionality ;-). This is what we are all used to seeing when leaving a document without having saved it:

Image

Have you ever seen anything like this on the web? Probably not. How would you do it? There are probably many fancy ways that you could track any change to a form and then set some flags to alert the user when the document is closed. There is an easier method. Internet Explorer 4 introduced the onbeforeunload event to the DOM. This can be easily used to allow the user to cancel their navigation and make sure the document is saved.

To make this happen we first need the following text in the HTML Attribute for your form :

"onbeforeunload=\"navigateAway();\""

Now, place the following JavaScript function in the JS Header (or its equivalent in R4):

var isDocBeingSubmitted = false;

function navigateAway() {
msg = "----------------------------------------------------------\n";
msg += "Your contact form has not been saved.\n";
msg += "All changes you have made will be lost\n";
msg += "----------------------------------------------------------";
//inbuilt get-out: hold control key to bypass message;
if (isDocBeingSubmitted == false && event.ctrlKey == false) event.returnValue = msg;
}


The key part is the returnValue that is assigned to the onbeforeunload event via this function. When it has a value assigned to it the event knows to prompt the user like below:

Image

Pressing OK lets the user continue whereas Cancel returns the user to the form.

This is all well and good when the user is leaving the page by any other means than pressing the Submit button (or even the close button). When they press Submit we need to tell the onbeforeunload not to alert the user. That is why the function has the isDocBeingSubmitted global variable. If this is true then no prompt appears. To do this, the onclick event of the Submit button needs to be:

<input type="button" value="Submit" onclick="isDocBeingSubmitted = true; document.forms[0].submit();">

You may have noted that the function also checks whether the Ctrl key is being pressed. I put this in there as a little cheat to let me out of the form at any point without being reminded.

Note: Be aware of little caveats I haven't bothered to cater for. If the user presses submit and the "escapes" before the form is redirected or submitted, the JavaScript variable will be true and the function will not work anymore.


Feedback

  1. Reminding Users To Save

    Great article Jake! I like that a lot.

    Guess I will show my ignorance here (and there's a lot of that) but where does the event object come from?

    Also if I were already running a JS script on sumbit, could I set the IsDocumentBeingSaved property at the end of that function, as long as it si before the submit call?

    Dave

      • avatar
      • Jake
      • Fri 16 Feb 2001

      Good question

      The "event" object belongs to the window object and doesn't need generating. You can use it to find out what happened at the time the script was called - e.g Where the cursor is, which button was pressed etc etc

      You can have the JS set the save flag to true from anywhere you like (as long as it's before the form is submitted).

      Jake

      Show the rest of this thread

  2. Netscape equivalent?

    This is a really great event - I'm generally not pro-Microsoft, but I had an intranet application I was working on several months ago (ASP/SQL, not domino) that we used this for. Data entry was in one frame - there were four other frames, and we needed to make sure people saved their data when they tried to click in any of the other frames.

    Luckily because this was an intranet app, we could specify browser. However, I spent weeks trying to come up with a workaround for Netscape, just in case the client changed their mind. Couldn't do it. Has anyone come up with a Netscape equivalent to the onBeforeUnload event?

    1. Re: Netscape equivalent?

      The eternal question - can it work in Netscape. The eternal answer being a resounding "NO!".

      I would love to think that all the great things that can be done in MS IE could be duplicated in NN but it just can't. For this reason I ONLY accept contracts developing intranets for compaines who have standardised on IE. I toyed with the idea of resigning from my current position when somebody way up high had the bright idea that the intranet should be accessible to NN users too..... hmmmm.

      Shoot me down for saying it but NN is a complete pile of *&"!&^. Things CAN work in Netscape but it won't be any of the fancy things the users are coming to expect!

      Jake -CodeStore

      Show the rest of this thread

  3. Remind users to save their forms

    I can't get your code to work in IE 6.0 - when I click on the browser Back button I don't get the popup dialog - it just goes back to the prev web page...

  4. How to check if the user changed the form at all?

    It is an elegant solution, although it would be nice if we prompted the user only when it is actually needed.

    In other words can you (what is the most efficient way?) check if the user made any change on the form, like the Notes client does it for you?

    I would also be very interested how the Notes client does it. Is it a dll function?

    The problem is that if you set the "SaveOptions" field to "0", then this functionality is basically turned off. Is it possible to call a dll function from your LS and do it explicitly?

      • avatar
      • Jake
      • Wed 5 Nov 2003

      Re: How to check if the user changed the form at a

      Sounds like you need to get to know this site's content better:

      http://codestore.net/store.nsf/unid/DOMM-4UTKE6?OpenDocument

      :o)

      Jake

    1. remind user to save the attachments

      Can there be some validation for attachments too. Remind the user to save the form if he/she add/ deletes the attachment and try to navigate away without saving the changes

    • avatar
    • Ian
    • Wed 18 Feb 2004

    Form Refress on Keyword change

    Great solutions however .. what happens if one or more fields refresh the fields on key word change?

    To prevent the message appearing when a field that was required to refresh choices on a key word change we added the following to the test..

    document._DominoForm.__Click.value != "0"

    the downside is it relies in an undocumented attribute of a domino form.

  5. onbeforeunload

    Hi,

    I am trying to invoking the onbeforeunload event handler on a page and want to show a custom message to the user: "Changes you made to this page were not saved.\n\n Press OK to continue without saving, or Cancel to return to the page and save.".

    I want to suppress the browsers own 2 messages:

    1. "Are you sure you want to navigate away from this page?"

    2. "Press OK to continue, or Cancel to stay on current page".

    Right now, my custom message appears in between the above 2 messages. Is it possible to suppress the aboove 2 messages.

    Plz help.

    Thanks

    1. Re: onbeforeunload

      I have the same problem too, did you figure out how to solve it?

      • avatar
      • Alejandro
      • Mon 6 Mar 2006

      Re: onbeforeunload

      It seems to be that is not possible. Look at this:

      http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/referen ce/events/onbeforeunload.asp

  6. Any way to trap the cancel button?

    Hi, I am using the onbeforeunload event to trap is anything has changed in the form. I am using a global js variable to track if anything has changed. Its working fine. Now I have another requirement that if the user clicks the cancel button I need to revert back to the old values on a different form which is already submitted. Is there any way to trap which button the user has clicked?

    1. Re: Any way to trap the cancel button?

      I used the script to detect if the users were closing the page without saving. It worked perfectly, but now an additional script is screwing it up. This scripts displays a datepicker (DIV) and after that the event on the beforeunload is triggered too! Any suggestions here from somebody to check what the user had clicked?

      My thanks will be great!

  7. Some times notes misses the event

    That´s a great tip. I´m using this techique to run an agent to create control documents in a web application i´m working on, instead of showing a message to the user. But some times, dont know why, it just doesnt work ! Looks like i need to put some kind of "sleep" method to wait for the agent to run. Just dont know how. Any ideas ??

    1. Re: Some times notes misses the event

      I'm having quite the same problem, seems like the event sometimes doesen't fire...

      The problem seems only to happen on some machines - but then always, and on other machines never.

      Could it be some setting i Internet Explorer?

    • avatar
    • R. Centauri
    • Mon 11 Jul 2005

    How to capture what is the next page

    Hi there,

    Is there anyway to know what is the next url the user is going to leave our site to? I'm asking this because the onbeforeunload is also get called when user is just refreshing the page, not really leave the page. So it will be very useful to really know where is user going to, to give correct prompt.

    Thanks

    R. Centauri

    1. Anyone else getting error when clicking Cancel?

    • avatar
    • kamal
    • Thu 30 Nov 2006

    Submit button

    Hi Jack This article is really good.I have a little problem getting this executed though.I am working in asp.net1.1 and i have button on which i am trying to bypass the onBeforeUnload event.But it keeps giving me error.Here is the code i am using.

    <asp:Button id="Button1" style="Z-INDEX: 101; LEFT: 387px; POSITION: absolute; TOP: 201px" runat="server" Text="Button" onclick="isDocBeingSubmitted = true;document.forms[0].submit();"></asp:Button>

    and the error i am getting is "CS1026: ) expected"

    Can you help me on this.

    Thanks Kamal

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:



Navigate other articles in the category "JavaScript"

« Previous Article Next Article »
Checking for attachments in JavaScript   Modular Field Validation Script I

About This Article

Author: Jake Howlett
Category: JavaScript
Keywords: window; close; save; form;

Options

Feedback
Print Friendly

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »