Using jQuery to store the state of a complicated form

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.

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"));

I would start by using the dumbFormState jQuery plugin.

That plugin actually automatically saves things while you are typing etc. so when they come back, its already filled out again and you don't need server-side to do it.

After that, I would create further jQuery to load after the dumbFormState plugin to then show/hide the areas that are filled out. Its no problem if you call this before someone ever filled out their form because it will be blank and your logic should not show/hide things that are blank anyway.

I guess you are looking for .serialize(), which serializes form data. To do that, your input elements need to be within a form tag plus, all of them have to have name attributes.

var form1data = $('#form1').serialize();

alert(form1data);

You may want to just put the data that is non-default into a json, then send it through a post request to the server to be saved.

So, once the person goes back to the page you automatically look to see if they have something saved, and you can either ask if they want to use it or populate the form from the saved data.

Saving default values is a waste of bandwidth, as you won't be changing it from what the form was when it was loaded anyway.

UPDATE:

To save it as a JSON I think it would be easy enough to just build it up into a long string since the format is easy, so you will just send everything as a single string.

You may want to also save the stage they are on, or, automatically save as they go to each stage, which may be a better option, in case their computer crashes they won't have to start at the beginning again, but you may want that enabled by a checkbox, to turn on auto-save.