点击提交后如何向表单注入数据？

Question

我想通过单击

Submit

按钮发送表格。该表单最初仅包含一个

CSRF

标记。当用户单击“提交”时，我想使用普通 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>

到目前为止我已经有了以下 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").innerHTML;

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

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

不幸的是，表单不会以这种方式发送，因为

FormData:submit

不是函数。

所以这是我的问题：
如何在提交事件后向表单注入附加数据？

Answer 1

尝试这样

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

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

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

    
    document.getElementById("userInput1").value=userInput;

    form.submit(); 
}

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

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

</form>