从 FormData 对象填充 HTML 表单

Posted 2023-02-22

【中文标题】从 FormData 对象填充 HTML 表单

【英文标题】：Populate an HTML Form from a FormData object

【发布时间】：2017-07-13 09:21:00

【问题描述】：

是否可以存储表单的 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);

【问题讨论】：

你想用data做什么？

我想用它来填充 html 表单的字段值。

【参考方案1】：

使用this 和this，这是我序列化和反序列化表单数据的方法：

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


function formDeserialize(form, data) 
    const entries = (new URLSearchParams(data)).entries();
    for(const [key, val] of entries) 
        //http://javascript-coder.com/javascript-form/javascript-form-value.phtml
        const input = form.elements[key];
        switch(input.type) 
            case 'checkbox': input.checked = !!val; break;
            default:         input.value = val;     break;
        
    

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

【讨论】：

谢谢，这是我所见过的最接近解决方案的最佳方法。更喜欢本机功能，但我会对此进行测试。谢谢！

【参考方案2】：

不确定这是否是你问题的答案，但如果你有 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

【讨论】：

这不是确切的答案，而是非常有用的信息！我一定会在这个项目中寻找其他应用程序。它基本上是一个超轻量级的前端框架。

【参考方案3】：

您在从 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;

希望这是您的问题，如果不是，请告诉我，我们可以解决。

【讨论】：

我知道我可以使用 .get 单独访问属性，但是，在具有数十个字段的表单上，能够从表单数据对象填充这些表单字段而不需要一次做一个字段或提前知道字段的名称。 .getAll 函数的方向是正确的，但正在寻找一种方法将这些值放回正确的表单字段中。

【参考方案4】：

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

【参考方案5】：

您可以使用 localStorage 或 sessionStorage 对象。

喜欢

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

或

sessionStorage.data = data; //untill session complete