如何在提交之前更改 FormData？答案

【问题标题】：How do I change FormData before it submits?如何在提交之前更改 FormData？
【发布时间】：2019-11-16 10:04:00
【问题描述】：

我正在做一个项目，我需要在提交之前更改 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') 设置对象的值，但我不确定如何发布这个新的 FormData 对象而不是旧对象。

【问题讨论】：

标签： javascript html asp.net forms form-data

【解决方案1】：

FormData 接口的 set() 方法为 FormData 对象内的现有键设置一个新值，如果键/值不存在，则添加该键/值。

var formData = new FormData(); // Currently empty
// Add a value
formData.append('username', 'Chris');

// Change value
formData.set('username', 'tom');

know more

【讨论】：

【解决方案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>

【讨论】：

如何访问 formData 对象以实际操作正在发送的 formData？如果我创建一个新的 var formData = new FormData(form);它实际上并没有改变正在发送的 formData 而是创建了一个新的 formData 实例 @Super Penguino
删除该键并设置新的
@JonathanCorrin，即使我面临同样的要求。提交前应修剪表单数据，但不影响输入值。如果您找到了解决方案，请自行发布答案。

【解决方案3】：

您可以通过在“[type='submit']”按钮上放置一个事件监听器来获取数据。在下面的示例中，我使用 jquery 来定位表单并使用 ajax 来发送请求。希望对您有所帮助。

$("#submit-info").click(function ()
    {
    var data = new FormData($('form')[0]);
    data.append("route",1); (//adding a new value)
    data.set('field','newValue'); //use the name attribute of html tag to target the respective key-value pair

    $.ajax({
        send the data(optional)
    });
});

 <form method="post" enctype="multipart/form-data" >
  <input type="text" name="field" id="field1" value="">
 <button type="submit" class="btn btn-primary" id="submit-doc">Submit</button>
 </form>

【讨论】：

由于这使用了 Ajax，如果响应包含任何附件，它们将不会被浏览器处理。因此，对于这些情况，这可能行不通。

【解决方案4】：

var formData =new FormData();
   formData.set('field1', 'sample');
   formData.set('field2', 'try');
   formData.set('field3', 'again');
    
      //delete the key
   formData.delete('field1');

   //append new value of the key
   formData.set('field1', 'test');

   
   //check all formdata values
   for(var pair of formData.entries()) 
   {
       console.log('FormData Pair ('+ pair[0]+ ': '+ pair[1]+')'); 
   }

您可以通过删除键并设置新值来尝试此解决方案

   var formData =new FormData();
   formData.set('field1', 'sample');
    
   //delete the key
   formData.delete('field1');

   //append new value of the key
   formData.set('field1', 'test');


   //check the formdata key if value was updated object
   for(let val of formData.values())
   {
       console.log(val);
   }

【讨论】：

有没有办法访问与现有表单关联的表单数据？通过调用 new FormData()，我们正在创建一个新实例。或者如何将新实例发送到 action 属性中的 url？

【解决方案5】：

尝试使用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，因为它会取消默认的表单请求（@ 987654329@类型请求）。

【讨论】：