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

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.

Try Sisyphus.js https://github.com/simsalabim/sisyphus. It persists the form data in the browser's local storage and is robust against tabs closing, browser crashes, etc...