html：加载formData以填充默认值

Question

我有一个 HTML 表单：

    <form id="myForm" method="POST" action="/submit" target="response-frame">
        <div class="input">
            <label for="name">Full Name</label>
            <input id="name" name="name" type="text" value="x" />
        </div>

        <div class="input">
            <label for="email">Email Address</label>
            <input id="email" name="email" type="email" value="[email protected]" />
        </div>

        <button type="submit">Submit</button>
        <button type="loadValues" onclick="setFormValues()">Load Values</button>
    </form>

当我点击提交时，填写的值将以

formData

对象的形式发送 https://developer.mozilla.org/en-US/docs/Web/API/FormData

对于某些表单条目，我有默认/占位符值，例如对于电子邮件，我有默认值：

[email protected]

，当我提交表单时，此默认值包含在表单数据中。

我的问题是，有没有办法用现有的 formData 对象优雅地填充我的 HTML？

我知道我可以使用填充表单的脚本，就像我在这里已经在某种程度上所做的那样：

<script>
        function setFormValues() {
            const urlParams = new URLSearchParams(window.location.search);
            const key = urlParams.get("key");
            if (key) {
                document.getElementById("name").value = key;
            }
        }

        window.onload = setFormValues;
    </script>

但是我的表单将有 15 个左右的字段，手动设置这些字段似乎很乏味，而且通过循环设置它们似乎不太优雅。

理想情况下，我只想“加载现有的 formData 对象”，它会自动放置所有默认值/占位符。然后，用户可以根据自己的喜好修改字段，当他们单击发送时，修改后的 formData 将发送到目的地。

我的完整代码在这里：https://github.com/charelF/wg-form-page/blob/main/public/form.html

Answer 1

您可以使用

Object.entries()

和

Array::forEach()

:

const obj = {name: 'Alexander Nenashev', email: '[email protected]'};

Object.entries(obj).forEach(([name, value]) => 
  Object.assign(document.querySelector(`form [name="${ CSS.escape(name) }"]`), {value}));

    <form id="myForm" method="POST" action="/submit" target="response-frame">
        <div class="input">
            <label for="name">Full Name</label>
            <input id="name" name="name" type="text" value="x" />
        </div>

        <div class="input">
            <label for="email">Email Address</label>
            <input id="email" name="email" type="email" value="[email protected]" />
        </div>

        <button type="submit">Submit</button>
        <button type="loadValues" onclick="setFormValues()">Load Values</button>
    </form>