在调用submit()方法之前更改表单的formData

Question

我需要使用 FormData 将一些数据添加到表单中，以便在提交表单时也会发布这条新数据，但我无法让它工作。请注意，我不想使用 ajax 或 fetch 来发送 formData，因为我希望页面在用户单击提交按钮时将其重定向到不同的页面。

                const myForm = document.querySelector('form');
                myForm.addEventListener('submit', (event) => {
                    event.preventDefault();
                    const formData = new FormData(myForm);
                    formData.append('age', '20');
                    event.target.submit();
                });

Answer 1

正如评论中提到的，最好的方法是阻止正常事件，提交您自己的 formData 对象，然后自行重定向。

var form = document.querySelector("form");
form.addEventListener('submit', e => {
    e.preventDefault()
    // build up formdata
    const formData = new FormData(form);
    formData.append("age", '20');
    const request = new XMLHttpRequest();
    request.open("POST", "submitform.php");    

    // redirect on success
    request.addEventListener('load', function( event ) {
      window.location.replace('/my-locaiton')
    });

    // Do whatever needed on error
    request.addEventListener('error', function( event ) {
      console.log('failed request..')
    });   
    
    request.send(formData);
})

<form id="form" action="POST" target="redirect.html">
    <input type="text" value="somtext">
    <input type="submit">
</form>

如果您仍然想让表单完成这项工作，您可以执行类似的操作来阻止该事件，然后再次发送它。 在这种情况下，您需要向表单添加隐藏元素：

const form = document.getElementById('form')
const listener = async (e) => {

    // prevent default action.
    e.preventDefault()

    // only run the listener only once.
    form.removeListener('submit', listener)

    // append actual data..
    const ageInput = document.createElement('input')
    ageInput.style.visibility = 'hidden'
    ageInput.setAttribute('name', 'age')
    ageInput.setAttribute('value', '20')
    form.appendChild(ageInput)

    // dispatch event again!
    e.target.dispatchEvent(e)
}

form.addEventListener('submit', listener)

Answer 2

我挣扎了几个小时，最后我想到“为什么我不自己创建另一个表单并尝试提交它？您可以使用 FormData 或 serializeArray() 从以前的表单中提取键和值并将它们附加到新表单中形式。

let testForm = {'key1': value1, 'key2': value2} // 我想用新表单提交的值

    function add(form, name, value) {

        //Create an input type dynamically.
        var element = document.createElement("input");
        //Assign different attributes to the element.
        element.setAttribute("value", value);
        element.setAttribute("name", name);

        //Append the element in page (in span).
        form.appendChild(element);
    }

    let myForm = document.createElement('form');

    for (const [key, value] of Object.entries(testForm)) {
        console.log(`${key} ${value}`);
        add(myForm, key, value)
    }

    myForm.setAttribute("action", "url")
    myForm.setAttribute("method", "POST")

    document.body.appendChild(myForm)
    myForm.submit();