Using jQuery to store the state of a complicated form

Question

I have a rather complicated form with many "steps" in it that are filled in by the user. Some steps (think of them as form segments) have default options, but on clicking a "enter custom values," they display a hereto hidden set of fields that the user can enter info in. Here is an example

<div id="#s1_normal">
<input type="radio" name="mode" value="a"> Mode A
<input type="radio" name="mode" value="b"> Mode B
Choose one of the above for applying average coefficient 
values of "a" or "b" to 100% of your product or
<a href="#" onclick="toggleCustom('s1');">enter custom values</a>
</div>

<div id="#s1_custom">
%a: <input type="text" name="perc_a"> coeff. a <input type="text" name="coeff_a">
%b: <input type="text" name="perc_b"> coeff. b <input type="text" name="coeff_b">
Enter custom values above or 
<a href="#" onclick="toggleCustom('s1');">choose average values</a>

There are several such segments, for example, #s1 .. #s7. Here is my task. I want to enable the user to save the state of a form. So, once a user has filled out the entire form, choosing average defaults for some segments, and entering custom values for other, the user is able to click a button and have the entire state saved for thawing later. I am thinking, if I can save the state in an object that I can serialize, I can save it in a db table or some other persistent storage.

The user can come back at a later time and re-construct the entire previous session.

How do I do this? There is the getAttributes plugin http://plugins.jquery.com/project/getAttributes, and there is the jQuery serialize method, but I can't for the life of me get started. Please nudge me in the right direction.

Answer 1

Here are a couple functions to help with this process. formToString serializes a form as a string, and stringToForm does the reverse:

function formToString(filledForm) {
    formObject = new Object
    filledForm.find("input, select, textarea").each(function() {
        if (this.id) {
            elem = $(this);
            if (elem.attr("type") == 'checkbox' || elem.attr("type") == 'radio') {
                formObject[this.id] = elem.attr("checked");
            } else {
                formObject[this.id] = elem.val();
            }
        }
    });
    formString = JSON.stringify(formObject);
    return formString;
}
function stringToForm(formString, unfilledForm) {
    formObject = JSON.parse(formString);
    unfilledForm.find("input, select, textarea").each(function() {
        if (this.id) {
            id = this.id;
            elem = $(this); 
            if (elem.attr("type") == "checkbox" || elem.attr("type") == "radio" ) {
                elem.attr("checked", formObject[id]);
            } else {
                elem.val(formObject[id]);
            }
        }
    });
}

Usage:

// Convert form to string
var formString = formToString($("#myForm"));
// Save string somewhere, e.g. localStorage
// ...

// Restore form from string
stringToForm(formString, $("#myForm"));