I want to remove the "save" button and auto-save changes live.

The way I know this can be done is by using the OnChange function.

Baring in mind that the web application will be used by quite a lot of people, the number of requests to the server will most likely reach to an overwhelming level in a very short period of time.

What is the best approach to auto save without overwhelming / sending so many requests to the server?

There are two types of editable fields:

1- Simple fields which would have small amount of letters/words.

2- Text-areas for large amount of copy.

I want to remove the "save" button and auto-save changes live.

The way I know this can be done is by using the OnChange function.

Baring in mind that the web application will be used by quite a lot of people, the number of requests to the server will most likely reach to an overwhelming level in a very short period of time.

What is the best approach to auto save without overwhelming / sending so many requests to the server?

There are two types of editable fields:

1- Simple fields which would have small amount of letters/words.

2- Text-areas for large amount of copy.

• javascript
• php
• jquery
• server
• autosave

• @VenomFangs there is no code yet, I am trying to find which approach I should take before coding it. – Leo Commented Mar 25, 2016 at 23:01
• Simple solution that won't accidentally cause lots of server calls: Store a "hasAnythingChanged" variable, then every x amount of time if anything's changed then save to the server. (Also probably a good idea to include a prompt if they try to leave the page with unsaved changes) – DBS Commented Mar 25, 2016 at 23:06
• Better save it in local storage on the client. – Charlotte Dunois Commented Mar 25, 2016 at 23:14
• Has anything changed is sometimes know as a dirty bit – James Oravec Commented Mar 25, 2016 at 23:30
• I know this might be out of scope but have you thought of using AngularJS for your project. If you have mainy other forms, that could potentialy save you some time. – Mathieu de Lorimier Commented Mar 26, 2016 at 1:01

3 Answers 3

Personally, I'd be doing this on a debounce of say half a second to a second. If a user stops typing for a specified period of time, the save is actioned. It's also pretty simple to achieve:

var debounce = null;
$(document).ready(function() {
    $('.field').keydown(function() {
        clearTimeout(debounce);
        debounce = setTimeout(function(){
            // SAVE
        }, 500);
    });
});

This is a non-code answer to your question.

There is no good way to do this. You can make the updates based on X amount of words, or you can make it every character, or even every second. The problem is that is tons of connections.

It is resource and bandwidth heavy, requiring you to use an internet connection every time you want to save. Then you have the problem regarding what you want to send to the database?

How do you check to see what the database already has? Do you just resend the entire thing?

These are all questions that you must answer. But essentially it is the same as it is now... except you have some sort of code (as i mentioned character change, word change, time change) and will then push either the entire text / field. or just what it doesn't have into the database.

So there is no GOOD way to do it. If I had to do it, I would store the info locally. Then lets say once every 30 sec, update it and send only the changed characters to the database.

I would suggest doing autosave on the onFocusout event instead of onChange. That way it will cut down on server requests when inputs lose focus. Add a class to the input fields such as class="autosave" and then create a focusout listener.

$('.autosave').focusout(function(){
  autoSave();
});

Here is a fiddle: https://jsfiddle.net/fcLuw5p9/