This extract of JavaScript code illustrates how the value of a text box on an HTML form could be saved efficiently when used with AJAX.
<input type="text" name="proj1" id="proj1" value="Car_log"
onkeyup="timed_updateSummaryCRecord(event.keyCode, '1','project', this.value)" />
The onkeyup event retrieves the user input as soon as the key is pressed, then the event.keyCode is validated to ensure only alpha-numeric characters trigger the save routine.
function timed_updateSummaryCRecord(keyCode, parent_id, field, val) {
if (val.length > 0 && ((keyCode > 40) || (keyCode == 8)) ) {
clearTimeout(t);
t = setTimeout("updateSummaryCRecord('" + parent_id + "', '" + field + "', '" + val + "')", 1000);
}
}
The setTimeout will trigger the save routine after 1 second, however if the user continues to type before the 1 second timer has elapsed, the running timer will be cancelled and the new timer will start.
Note: keyCode value '8' is accepted because it is the backspace key. It would also be helpful to accept the delete key press.