Autosave input box's to database during pause in typing?

Question

I have a large form on my website that I want to be able to autosave to a database as the user is filling it out. Almost identical to how google drive works when typing a document.

I am trying not to have a function that runs every X seconds but rather a function that runs when the user has taken a break in typing. So, if the user has not typed in 1 hour but is still on the page, it doesn't keep pushing save requests.

This is all I have so far which is a basic javascript form submit.

$("#page1Form").submit(function(event){   event.preventDefault();     $changesSaved.text("Saving...");   var url = "/backend/forms/page1-POST.php";         $.ajax({          type: "POST",          url: url,          data: $("#page1Form").serialize(),          success: function(data) { $changesSaved.text(data); }         });   return false;   }); 

Answer 1

Debounce the textarea change.

Demo: jsFiddle

Put your ajax call in the saveToDB() function. These event names('input propertychange change') will trigger on any form element change such as radio buttons, inputs, etc.

var timeoutId; $('#the-textarea').on('input propertychange change', function() {     console.log('Textarea Change');      clearTimeout(timeoutId);     timeoutId = setTimeout(function() {         // Runs 1 second (1000 ms) after the last change             saveToDB();     }, 1000); });  function saveToDB() {     console.log('Saving to the db');     } 

---

Here is a full demo showing you how to debounce a full form and use ajax to send the data and then return the status (Saving, Saved, etc).

Demo full form and ajax: jsFiddle

Answer 2

I know that this question is old, but I would like to include a code that I like the most. I found it here: http://codetunnel.io/how-to-implement-autosave-in-your-web-app/

Here is the code:

var $status = $('#status'),     $commentBox = $('#commentBox'),     timeoutId;  $commentBox.keypress(function () {     $status.attr('class', 'pending').text('changes pending');      // If a timer was already started, clear it.     if (timeoutId) clearTimeout(timeoutId);      // Set timer that will save comment when it fires.     timeoutId = setTimeout(function () {         // Make ajax call to save data.         $status.attr('class', 'saved').text('changes saved');     }, 750); }); 

It saves after the user stops writing for more than 750 milliseconds.

It also has a status letting the user know that the changes have been saved or not.