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

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

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.

Answer 3

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

Answer 4

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.