如何在提交之前更改 FormData？

Question

我正在开发一个项目，需要在提交之前更改 FormData。我无法更改元素值，我必须更改进入 POST 的实际 FormData。

我尝试更改 form.onsubmit 来更新值（适用于某些字段，但其他字段由于验证检查而不起作用）

<form name="aspnetForm" method="post" action="Posturl.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm" autocomplete="off">
   <input type="text" name="field1" id="field1" value="">
   <input type="text" name="field2" id="field2" value="">
</form>

我知道我可以创建一个新的 FormData 对象，并且可以使用 formData.set('field1', 'newValue') 设置该对象的值，但我不确定如何 POST 这个新的 FormData 对象而不是旧对象。

Answer 1

尝试使用formdata事件监听器。

document.querySelector("form").addEventListener('formdata', (e) => {

  const formData = e.originalEvent.formData; 
  
  formData.append('alphabet', "abcde");
  formData.append('a1b2', "123123");
});

来源： https ://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/formdata_event

我使用e.originalEvent.formData而不是e.formData（遵循上面的文档），因为e.formData是undefined当然，不要e.preventDefault在提交时使用，因为它会取消默认的表单请求（Doc类型请求）。

Answer 2

您可以简单地将数据与 onsubmit 一起放入输入中

<form name="aspnetForm" method="post" action="Posturl.aspx" onsubmit="formData.set('field1', 'newValue');javascript:return WebForm_OnSubmit();" id="aspnetForm" autocomplete="off">
   <input type="text" name="field1" id="field1" value="">
   <input type="text" name="field2" id="field2" value="">
</form>