FormDataEvent

FormDataEvent 接口表示 formdata 事件 - 此类事件在 HTMLFormElement 对象上触发，在表示表单数据的条目列表构建完成之后。这发生在提交表单时，但也可以通过调用 FormData() 构造函数来触发。

这使得在响应 formdata 事件触发时能够快速获得一个 FormData 对象，而不是在使用诸如 fetch() 的方法提交表单数据时需要自己将其组合在一起 (参见 使用 FormData 对象）。

Event FormDataEvent

构造函数

FormDataEvent()

创建一个新的 FormDataEvent 对象实例。

实例属性

从其父接口 Event 继承属性。

FormDataEvent.formData

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

实例方法

从其父接口 Event 继承方法。

示例

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(form.querySelector('input[name="field1"]')); // FOO
  console.log(form.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.set("field1", formData.get("field1").toLowerCase());
  formData.set("field2", formData.get("field2").toLowerCase());
});

规范

规范
HTML 标准
# the-formdataevent-interface

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅