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

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

Answer 2

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.