点击Submit后如何向Form注入数据并提交？

点击Submit按钮提交表单，表单原本仅包含一个CSRF token。需要在用户点击提交时，用原生JS将页面收集的数据填充到表单中再完成提交。

提供的HTML代码：

<input id="user-input" type="text" name="userInput">

<form id="best-form-ever" method="post" action="/amaze-me">
    <input type="hidden" name="_csrf" value="xyz1234">
    <button id="submit-form" name="submit-form">Submit</button>
</form>

已编写的JS代码（存在问题）：

document.querySelector("#best-form-ever").addEventListener("submit", this.handleSubmit, false);

handleSubmit(event) {
    event.preventDefault();

    const form = document.getElementById("best-form-ever");
    const userInput = document.querySelector("#user-input").innerHTML;

    const payload = new FormData(form);
    payload.append("userInput", userInput);

    payload.submit(); /* this doesn't work :( */
}

问题：FormData对象没有submit()方法，导致无法提交表单。

方案一：动态添加隐藏输入框到表单，再提交表单 #

这种方式完全贴合原生表单提交逻辑，会触发页面跳转，和普通表单提交行为一致：

document.querySelector("#best-form-ever").addEventListener("submit", handleSubmit, false);

function handleSubmit(event) {
    event.preventDefault();

    const form = document.getElementById("best-form-ever");
    // 修正：输入框的用户内容存在value属性里，不是innerHTML
    const userInput = document.querySelector("#user-input").value;

    // 移除已存在的同名隐藏输入框，避免重复提交数据
    const existingInput = form.querySelector('input[name="userInput"]');
    if (existingInput) {
        existingInput.remove();
    }

    // 创建隐藏输入框承载用户数据
    const hiddenInput = document.createElement("input");
    hiddenInput.type = "hidden";
    hiddenInput.name = "userInput";
    hiddenInput.value = userInput;

    // 将输入框加入表单，执行提交
    form.appendChild(hiddenInput);
    form.submit();
}

方案二：用Fetch API异步提交FormData（无页面跳转） #

如果不需要页面跳转，想实现异步提交，可以用Fetch发送FormData：

document.querySelector("#best-form-ever").addEventListener("submit", handleSubmit, false);

async function handleSubmit(event) {
    event.preventDefault();

    const form = document.getElementById("best-form-ever");
    const userInput = document.querySelector("#user-input").value;

    const payload = new FormData(form);
    payload.append("userInput", userInput);

    // 发送异步请求
    try {
        const response = await fetch(form.action, {
            method: form.method,
            body: payload
        });
        if (response.ok) {
            console.log("提交成功");
            // 这里可以添加提交成功后的逻辑，比如提示用户、重置输入框等
        }
    } catch (error) {
        console.error("提交失败:", error);
    }
}

原代码的关键错误说明 #

• 获取输入框内容时，应该用value属性而非innerHTML：innerHTML用于获取元素内部的HTML结构，输入框的用户输入内容存储在value属性中。
• FormData只是表单数据的容器，本身不具备提交能力，需要通过表单自身的submit()方法，或者用Fetch/XHR这类API发送FormData。

内容的提问来源于stack exchange，提问作者Slevin