如何在点击提交按钮后向表单中注入数据？

Question

我想通过点击“提交”按钮发送表单。原始表单仅包含一个 CSRF 令牌。当用户点击提交时，我希望能够使用从页面上收集的数据，通过纯 JavaScript 来填充表单。

以下是带有表单和待注入的输入字段的 HTML 代码：

目前我已经编写了以下JavaScript代码：

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").value;

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

    payload.submit(); /* 这个方法不起作用 :( */
}

遗憾的是，由于 FormData:submit 不是一个函数，所以表单无法通过这种方式发送。

所以我的问题是：
如何在提交事件后向表单中注入额外数据并成功发送表单？

Sam Saffron · Answer

如果您在输入元素上设置 form 属性，并将其值设置为表单的 ID，则该输入元素会被包含在表单中。

在表单提交事件触发时，可以通过在输入元素上设置 form 属性或将元素直接添加到提交的表单中，来动态地将元素加入表单：

document.forms.bestformever.addEventListener('submit', function(e) {
  var formId = e.target.id;

  // 在提交事件中“收集”的输入元素
  Array.from(document.forms.dynamicallyaddedinputs.elements)
    .forEach(function(elm) {
      elm.setAttribute('form', formId);
    });
  
  // 在提交事件中动态添加到DOM并加入表单的输入元素
  e.target.innerHTML += '';
});

// 示例HTML代码

Josh Crozier · Answer

主要问题在于，使用 submit 函数并不完全等同于点击提交按钮。根据文档所述[¹]：

引用：

不会触发 submit 事件。特别是，表单的 onsubmit 事件处理程序不会被执行。
约束验证不会被触发。

然而，requestSubmit 方法则没有这样的限制，它将会像点击提交按钮一样精确地执行所有操作。需要注意的是，这个方法是在表单的 DOM 对象上调用的，而非 FormData 对象上。

一个更简单的做法是手动执行 HTTP 请求并将 FormData 对象传递进去。更多关于这一方法的文档可以在这里找到：https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript#associating_a_formdata_object_and_a_form

以下是相关的JavaScript代码片段：

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; // 注意此处应使用 `.value` 而不是 `.innerHTML`

  const payload = new FormData(form);
  payload.append("userInput", userInput); // 将额外数据添加至 FormData 对象

  try {
    const response = await fetch(form.action, {
      method: form.method,
      body: payload
    });
  } catch (e) {
    console.error(e);
  }
}

// 相关HTML代码段