HTMLFormElement: formdata 事件

基线 广泛可用

此功能已成熟，可在许多设备和浏览器版本上运行。它自 2015 年 7 月.

formdata 事件在构造表示表单数据的条目列表后触发。这发生在提交表单时，但也可以通过调用 FormData() 构造函数来触发。

此事件不可取消，也不会冒泡。

语法

在方法（如 addEventListener()）中使用事件名称，或设置事件处理程序属性。

js
addEventListener("formdata", (event) => {});

onformdata = (event) => {};

事件类型

一个 FormDataEvent。继承自 Event。

Event FormDataEvent

事件属性

继承其父接口 Event 的属性。

FormDataEvent.formData

包含一个 FormData 对象，该对象表示事件触发时表单中包含的数据。

示例

js
// grab reference to form

const formElem = document.querySelector("form");

// submit handler

formElem.addEventListener("submit", (e) => {
  // on form submission, prevent default
  e.preventDefault();

  console.log(formElem.querySelector('input[name="field1"]')); // FOO
  console.log(formElem.querySelector('input[name="field2"]')); // BAR

  // construct a FormData object, which fires the formdata event
  const formData = new FormData(formElem);
  // formdata gets modified by the formdata event
  console.log(formData.get("field1")); // foo
  console.log(formData.get("field2")); // bar
});

// formdata handler to retrieve data

formElem.addEventListener("formdata", (e) => {
  console.log("formdata fired");

  // modifies the form data
  const formData = e.formData;
  // formdata gets modified by the formdata event
  formData.set("field1", formData.get("field1").toLowerCase());
  formData.set("field2", formData.get("field2").toLowerCase());
});

onformdata 版本将如下所示

js
formElem.onformdata = (e) => {
  console.log("formdata fired");

  // modifies the form data
  const formData = e.formData;
  formData.set("field1", formData.get("field1").toLowerCase());
  formData.set("field2", formData.get("field2").toLowerCase());
};

规范

规范
HTML 标准
# event-formdata

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅