bryan bryan - 2 years ago 172
Javascript Question

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;

Answer Source

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 how 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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download