jQuery: Store dynamic form with values and reload on back button

Question

I've Googled and searched on SO quite a bit for this unique problem, but not really finding my exact solution.

I have a basic form with X number of inputs. At some point in the form, the user as the freedom to add inputs via button click if needed. When they submit the form, it goes to another page to collect the posted form data, but I want the ability for the user to click "Back" (or send them back programmatically) if the submit fails.

I have error checking setup prior to submit via javascript, but there are other things (such as a PHP mailer) that could fail and I want them to be able to resubmit their data.

The issue of course is when the browser clicks back, it - at best - refreshes the initial form that was in the DOM with input data, but I lose all of the dynamically added inputs.

I want to capture the form/data in a session and have it repopulate the DOM with the submitted version created by the user on click back.

The closest I've come is doing something like this on SUBMIT:

var theForm = $('#myForm');
sessionStorage.setItem('formData', JSON.stringify(theForm.clone(true).html().toString());

And this on postback/click back:

$('#myForm').replaceWith(JSON.parse(sessionStorage.getItem("formData")));

The problem here is I get my form, but not the data! Do I need to iterate over each input to get my data put back in the recreated form?? Why doesn't it grab the data when .clone(true) ed?

Answer 1

Here's the answer I ultimately got to work.

Upon form validation, I set the session to hold the form data like so:

    var theForm = $('#MyForm');
    sessionStorage.setItem('formHTML', JSON.stringify(theForm.clone(true).html()));

    theForm.find('input,select,textarea').each(function(){
        sessionStorage.setItem(this.name,this.value);
    });

Then, when the DOM loads again, I have this that checks for the session and populates the form with data if it exists:

  $(document).ready(function(){

        if (sessionStorage.getItem("formHTML")) {
            $('#MyForm').html($.parseJSON(sessionStorage.getItem("formHTML")));
        }

        $('#MyForm').find('input,select,textarea').each(function(i,elem){
            var sessItem = elem.name, sessValue = '';
            if (sessValue = sessionStorage.getItem(sessItem)) {
                if(elem.type=='radio' && elem.value==sessValue){
                    alert(elem[i].type+' has value of "'+elem[i].value+'"');
                    $('[name='+sessItem+']')[i].prop('checked',true);
                }
                else if(elem.type=='textarea'){
                    alert(elem.type);
                    $('[name='+sessItem+']').val(sessValue);
                }
                else
                {
                    $('[name='+sessItem+']').val(sessValue);
                }
            }

        });
    });