AJAX every form element?

Question

Is it better-practice to AJAX every form element separately (eg. send request onChange, etc) or collect all the data, then submit with 1 click save?

Essentially, auto-save or user-initiated-save?

Answer 1

I'd say that depends on the nature of your application and whether "auto-save" is a behaviour desired by your users.

"User initiated save" is what a user would expect from their experience with web forms nowadays - I would not deviate from that unless there's a good reason.

Answer 2

I would generally say that a user-initiated save is the way to go for most web-applications. If for nothing else, this is how users are used to interacting with web apps; familiarity and ease of use is extremely important in web applications. Not to mention it can cut down on unnecessary traffic.

This is not to say that auto-saving does not have it's place, but often it can be cause unnecessary traffic. For example, if I am auto-saving a contact form, fill out my name, then email, then back to name to change it, that is already 3 requests that have been sent with no benefit - this is extra work for no added advantage.

Once again, I think it does have a lot to do with your application or where you are planning on using it. Inline edits are something that often uses auto-saving and there I think it is useful, whereas a contact form/signup form would not be a good idea.

Answer 3

Depends on following factors:

1. What kind of data are you trying to save. E.g. is it okay to be able to save the data partly or you need to save it all at once?
2. How much data do you want to save? If you have many fields, you might want to send data in chunks (In case of wizards) or save everything at once
3. Its also a good idea to have data saved (in background) for large forms in a temp way if the user may take a long time to fill in the data (e.g. emails saved as drafts)
4. It also depends on your web app and the way you have designed your forms. In some forms you may allow certain fields to be modified and saved inplace, so that you can fetch additional data for example
5. In most cases it would be good to have an explicit "Save" action for your data forms