Repopulate form with values of a cookie

Question

I have a form that will save form values in a cookie incase user decides not to finish the form. This is what I have so far to create the cookie and read the cookie

function createCookie(name,value,days) {
if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function string2form($form, serializedStr) {
var fields = JSON.parse(serializedStr);
for (var i = 0; i < fields.length; i++) {
    var controlName = fields[i].name;
    var controlValue = fields[i].value;
    $form.find(['name='+ controlName]).val(controlValue);
}
}

jQuery('.rsform-button').click(function() {   
    var cookie = readCookie('storyCookie');     
    if(cookie === null){
        createCookie('storyCookie',JSON.stringify(jQuery('#userForm').serializeArray()),365);
    } 
    else{
        string2form(jQuery('#userForm'), cookie);
    }
});

What I am trying to do is check if the cookie exists and if it does repopulate the form with the values in the cookie. the cookie is formatted like this

[{"name":"form[story description]","value":"input value 1"},{"name":"form[star]","value":"input value 2"},{"name":"form[supporting characters]","value":"input value 3"},{"name":"form[capture your thoughts]","value":""},{"name":"form[timelines]","value":""},{"name":"form[how many settings]","value":""},{"name":"form[specific event]","value":""},{"name":"form[opportunity for growth]","value":""},{"name":"form[lessons learned]","value":""},{"name":"form[recurring themes]","value":""},{"name":"form[things done differently]","value":""},{"name":"MAX_FILE_SIZE","value":"0000"},{"name":"form[todays date]","value":""},{"name":"form[name]","value":""},{"name":"form[title]","value":""},{"name":"form[address]","value":""},{"name":"form[city]","value":""},{"name":"form[state]","value":""},{"name":"form[zip]","value":""},{"name":"form[telephone]","value":""},{"name":"form[email]","value":""},{"name":"form[signature]","value":""},{"name":"form[captcha]","value":""},{"name":"form[formId]","value":"4"}]

I want to know how would I split this up to get just the name of the form field and the value of that field and repopulate the form using the key pairs. Ok, thanks to @Barmar for pointing me in this direction. Ok now I can't get the form to repopulate using this code I got from this post jQuery Storage and retrieval form state (with data). I have been beating my head against the wall trying to get this to work but I still have not luck. I haven't done any coding in awhile so I am rusty.

possible duplicate of [jQuery Storage and retrieval form state (with data)](http://stackoverflow.com/questions/6567090/jquery-storage-and-retrieval-form-state-with-data) — Barmar, Apr 24 '13 at 19:02

score 0 · Answer 1 · answered Nov 29 '18 at 16:34

This is what I used to auto-populate a form from a saved cookie

var form = $('.post-610 form');
if (form.length) {
    var form_data = readCookie('saved_form');
    if (form_data != null) {
        string2form(form, form_data);
    }

    form.submit(function() {
        var form_data = form2string(form);
        createCookie('saved_form', form_data, 5);
    });
}

function createCookie(name, value, days) {
    var expires;

    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else {
        expires = "";
    }
    document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = encodeURIComponent(name) + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ')
            c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0)
            return decodeURIComponent(c.substring(nameEQ.length, c.length));
    }
    return null;
}


function form2string($form) {
  return JSON.stringify($form.serializeArray());
}

function string2form($form, serializedStr) {
  var fields = JSON.parse(serializedStr);
  for(var i = 0; i < fields.length; i++){
    var controlName = fields[i].name;
    var controlValue = fields[i].value;
    if (controlValue != '' && $form.find('[name=' + controlName + ']').val() == ''){
        $form.find('[name=' + controlName + ']').val(controlValue);
    }
  }
}

Repopulate form with values of a cookie

1 Answers1