1

我有一个表单，可以将表单值保存在 cookie 中，以防用户决定不完成表单。到目前为止，这就是我创建 cookie 并读取 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);
    }
});

我要做的是检查 cookie 是否存在，以及它是否使用 cookie 中的值重新填充表单。cookie 的格式是这样的

[{"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"}]

我想知道如何将其拆分以获得表单字段的名称和该字段的值，并使用密钥对重新填充表单。好的，感谢@Barmar 为我指明了这个方向。好的，现在我无法使用从这篇文章jQuery Storage and retrieve form state (with data)获得的代码重新填充表单。我一直在用头撞墙试图让它发挥作用，但我仍然没有运气。我有一段时间没有做任何编码，所以我生疏了。

4

1 回答 1

0

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);
    }
  }
}
于 2018-11-29T16:34:55.783 回答