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

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.

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


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');

    timeoutId = setTimeout(function() {
        // Runs 1 second (1000 ms) after the last change    
    }, 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

I know that this question is old, but I would like to include a code that I like the most. I found it here:

Here is the code:

var $status = $('#status'),
    $commentBox = $('#commentBox'),

$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.

Try Sisyphus.js It persists the form data in the browser's local storage and is robust against tabs closing, browser crashes, etc...

Need Your Help

.NET virus scanning API

c# .net api antivirus

I'm building a web application in which I need to scan the user-uploaded files for viruses.

How should I customize DropdownButtons and DropdownMenuItems in Flutter?

drop-down-menu widget dropdown flutter

The default DropdownButton with DropdownMenuItems returns a light-grey dropdown. How should I customize the dropdown (e.g. background color, dropdown width)? I can change the style property in both