Auto-save user input - the smartest way?

Question

I'm developing a social network website and I'm working with php/mysql/jquery and I want users to have the most user-friendly website experience. That's why I try to avoid a save (submit) button at all. So, when they're on their own profile and enter information like what languages they speak or where do they live, I want to auto-create a page entry, if it doesn't exist already.

For example if somebody speaks german and that entry isn't available in the database yet (it's called pages with rows title, text, date_added). This is most likely comparable with a Facebook page you can create on Facebook, but this should be about everything (languages, companies, locations, activities).

So my specific problem now is, how to implement this feature the most smartest way. I mean on what event should this save be triggered, because I obviously can't save a new entry on every letter that has been typed. I've already implemented an autocomplete function, so they can choose from entries that already exist, but as mentioned I want them to create new entries (pages), too. Most preferably without "flooding" the database with new entries.

The things I thought of:

1. When a user switches from one input to another and input has been made. Can this even be registered by JQuery? But here's the question, what if he leaves the page without switching to another input.

2. Save all data only then if he leaves the current page. I think there is this onunload function in JQuery.

3. Get confirmation from the user: "This entry hasn't been made yet. Do you want to save this entry?". But when should I ask this? I can't predict when the user is finished with typing.

Answer 1

Have a save button.

There are very good reasons why applications use explicit save/submit buttons:

1. Gives the user a chance to change their mind about the edit. Unless you provide some sort of undo mechanism with auto-save, the user has no way to abort a modification.
2. Protects against accidental modification. In the world of multi-monitor and multi-window setups it is common for a user to lose track of where the keyboard focus is and start typing the wrong window.
3. Efficiency. If the user is going to make changes to 5 fields at once, it's better to perform one save operation rather than 5.

Answer 2

Use a button

• It is what users expect, don't discount the value of a familiar interface.
• It gives the users the control they need, including the power to not publish something if they change their mind before finishing.
• It gives users confidence that their submission has been properly saved. Not knowing for certain is agonising.

Autosave

Autosaving usually means to save a copy of the work without publishing it, overwriting the "real" save, or doing anything other than making the work recoverable in case the copy in memory is lost. Doing this in a website editor is quite common, and often a valuable feature. The easiest way of autosaving in a browser is to copy the input to localStorage, though this only allows recovery on the local computer and browser, so while saving the copy on the server may be a bit more elaborate, it could in some cases also lead to a better user experience.

Answer 3

I think that you should look for a combination of things here.

• Look for loss of focus from an input item (blur)
• Once the user has focus on an input item, listen in on the OnKeyPress event. Keep track of the last Key-Up and when that crosses a threshold (say 30 secs or whatever), save the input

Answer 4

Write your code on $("input").change event to immediately save the value when user enters it. Can be useful when there are few fields.