Automatic form save

I have been struggling with the same problem for a while. The problem was that I didn't want to save to regular database tables, because that would require validation (validation for integers, currencies, dates, etc.). And I didn't want to tell the user about it when they might try to leave.

I ended up running into the AjaxSavedData table and making Ajax calls to populate it. AjaxSavedData is a persistent table in a database, but the data it contains tends to be temporary. In other words, it will temporarily save the user's data until they actually complete the page and navigate to the next.

The table consists of just a few columns:

AjaxSavedDataID - int:

Primary key.

UserID - int:

Define a user (simple enough).

PageName is varchar (100):

Necessary if you are working with multiple pages.

ControlID is varchar (100):

I call it ControlID, but it's really just the ClientID property that .NET provides to all WebControls. So if txtEmail was inside a custom Contact control, then the ClientID would be Contact_txtEmail.

The value is varchar (MAX):

The value entered by the user for this field or control.

DateChanged - datetime:

The date the value was added or changed.

Along with some customizable controls, this system makes it easy to "just work". On our site, the ClientID of each text box, dropdown, radio, etc. Guaranteed to be unique and consistent for a given page. So I was able to write the whole thing so that the stored data search would work automatically. In other words, I don't need to hook this function up every time I add some fields to the form.

This auto-save feature will be incorporated into the highly dynamic online business insurance app at techinsurance.com to make it more user-friendly.

In case you're wondering, here's the Javascript that allows auto-saving:

function getNewHTTPObject() {
    var xmlhttp;

    /** Special IE only code */
    /*@cc_on
    @if (@_jscript_version >= 5)
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (E) {
            xmlhttp = false;
        }
    }
    @else
        xmlhttp = false;
    @end
    @*/

    /** Every other browser on the planet */
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        try {
            xmlhttp = new XMLHttpRequest();
        }
        catch (e) {
            xmlhttp = false;
        }
    }

    return xmlhttp;
}

function AjaxSend(url, myfunction) {
    var xmlHttp = getNewHTTPObject();
    url = url + "&_did=" + Date();
    xmlHttp.open("GET", url, true);
    var requestTimer = setTimeout(function() { xmlHttp.abort(); }, 2000);
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2005 00:00:00 GMT");
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState != 4)
            return;
        var result = xmlHttp.responseText;
        myfunction(result);
    };
    xmlHttp.send(null);
}

// Autosave functions
var SaveQueue = []; // contains id to the DOM object where the value can be found
var SaveQueueID = []; // contains id for binding references (not always the same)

function ArrayContains(arr, value) {
    for (i = 0; i < arr.length; i++) {
        if (arr[i] == value)
            return true;
    }

    return false;
}

function GetShortTime() {
    var a_p = "";
    var d = new Date();
    var curr_hour = d.getHours();

    if (curr_hour < 12)
        a_p = "AM";
    else
        a_p = "PM";

    if (curr_hour == 0)
        curr_hour = 12;
    else if (curr_hour > 12)
        curr_hour = curr_hour - 12;

    var curr_min = d.getMinutes();
    curr_min = curr_min + "";

    if (curr_min.length == 1)
        curr_min = "0" + curr_min;

    return curr_hour + ":" + curr_min + " " + a_p;
}

function Saved(result) {
    if (result == "OK") {
        document.getElementById("divAutoSaved").innerHTML = "Application auto-saved at " + GetShortTime();
        document.getElementById("divAutoSaved").style.display = "";
    }
    else {
        document.getElementById("divAutoSaved").innerHTML = result;
        document.getElementById("divAutoSaved").style.display = "";
    }
}

function getQueryString(name, defaultValue) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == name) {
            return pair[1];
        }
    }

    return defaultValue;
}

function urlencode(str) {
    return escape(str).replace(/\+/g, '%2B').replace(/%20/g, '+').replace(/\*/g, '%2A').replace(/\//g, '%2F').replace(/@/g, '%40');
}

function AutoSave() {
    if (SaveQueue.length > 0) {
        var url = "/AjaxAutoSave.aspx?step=" + getQueryString("step", "ContactInformation");

        for (i = 0; i < SaveQueue.length; i++) {
            switch (document.getElementById(SaveQueue[i]).type) {
                case "radio":
                    if (document.getElementById(SaveQueue[i]).checked)
                        url += "&" + SaveQueueID[i] + "=" + urlencode(document.getElementById(SaveQueue[i]).value);
                    break;
                case "checkbox":
                    if (document.getElementById(SaveQueue[i]).checked)
                        url += "&" + SaveQueueID[i] + "=" + urlencode(document.getElementById(SaveQueue[i]).value);
                default:
                    url += "&" + SaveQueueID[i] + "=" + urlencode(document.getElementById(SaveQueue[i]).value);
            }
        }

        SaveQueue = [];
        SaveQueueID = [];
        AjaxSend(url, Saved);
    }
}

function AddToQueue(elem, id) {
    if (id == null || id.length == 0)
        id = elem.id;

    if (!ArrayContains(SaveQueueID, id)) {
        SaveQueue[SaveQueue.length] = elem.id;
        SaveQueueID[SaveQueueID.length] = id;
    }
}

      

        
        
        
      

    

Add this to your page to make this work:

window.setInterval("AutoSave()", 5000);

      

        
        
        
      

    

And to apply this to a textbox, DropdownList, Listbox or Checkbox, you just need to add this attribute:

onchange="AddToQueue(this)"

      

        
        
        
      

    

... or this for a RadioButtonList or CheckBoxList:

onchange="AddToQueue(this, '" + this.ClientID + "')"

      

        
        
        
      

    

I'm sure this Javascript could be simplified if you were using JQuery so you can think about it. But anyway, AJAX is the way to go. This is what Google uses to automatically save your email message to gmail, and it's the same for a blogger when you write a new post. So I took this concept and applied it to a huge ASP.NET application with hundreds of form elements and it all works great.