FormDataEvent
FormDataEvent 介面代表一個 formdata 事件——當表單資料的條目列表構建完成後，會在一個 HTMLFormElement 物件上觸發此類事件。這會在表單提交時發生，但也可以由 FormData() 建構函式的呼叫觸發。
這使得在 formdata 事件觸發時可以快速獲取一個 FormData 物件，而無需在你希望透過 fetch() 等方法提交表單資料時自行組裝（請參閱 使用 FormData 物件）。
建構函式
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 |
瀏覽器相容性
載入中…