Question

是否可以存储表单的FormData对象，然后使用该FormData对象将存储的FormData值重新填充回表单？

例如：的 HTML

<form id="test_form">
  <input type="text" name="last_name" placeholder="Last Name"/><br/>
  <input type="text" name="first_name" placeholder="First Name"/><br/>
  <input type="date" name="date_of_birth" placeholder="Date of Birth"/><br/>
</form>

的Javascript

var f = document.getElementById('test_form');
var data = FormData(f);
...
// mythical function to translate FormData back into form values
f.values(data);

Answer 1

您正在使用test_form ID创建FormData对象。

您可以这样访问FormData对象中的所有值：

var f = document.getElementById('test_form');
var data = new FormData(f);

var lastName = data.get('last_name');
var firstName = data.get('first_name');
var dob = data.get('date_of_birth');

您还可以使用FormData.getAll从对象中提取所有数据。

var allData = data.getAll;

希望这就是你所要求的，如果不是，请告诉我，我们可以弄明白。

Answer 2

使用this和this，这是我对表单数据进行序列化和反序列化的方式：

function formSerialize(form) {
    const data = new FormData(form);
    //https://stackoverflow.com/a/44033425/1869660
    return new URLSearchParams(data).toString();
}

function formDeserialize(form, data) {
    const entries = (new URLSearchParams(data)).entries();
    let entry;
    while(!(entry = entries.next()).done) {
        const [key, val] = entry.value,
              //http://javascript-coder.com/javascript-form/javascript-form-value.phtml
              input = form.elements[key];

        switch(input.type) {
            case 'checkbox': input.checked = !!val; break;
            default:         input.value = val;     break;
        }
    }
}

警告：formDeserialize()不会清除未包含在已存储数据中的字段，例如空的广播组或复选框。另外，未经所有<input>类型的测试。

Answer 3

不确定这是否是您问题的答案，但如果您有JQuery和JQuery View引擎，则可以使用：

var f = document.getElementById('test_form');
var data = FormData(f);

// Fill the form using JQuery view Engine:
$("#test_form").view(f);

请参阅示例：https://jocapc.github.io/jquery-view-engine/docs/form

Answer 4

您可以使用FormData将值存储到变量，但不能使用值填充回来。您需要使用脚本单独填充每个字段。

Answer 5

您可以使用localStorage或sessionStorage对象。

像

localStorage.data = data; //untill clear the browsing history

或

sessionStorage.data = data; //untill session complete

从FormData对象填充HTML表单

5 个答案: