HTMLFormElement: formdata 事件
formdata 事件在構建表示表單資料的條目列表後觸發。這會在表單提交時發生，但也可以透過呼叫 FormData() 建構函式來觸發。
此事件不可取消，也不會冒泡。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("formdata", (event) => { })
onformdata = (event) => { }
事件型別
一個 FormDataEvent。繼承自 Event。
事件屬性
繼承其父介面 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 |
瀏覽器相容性
載入中…
另見
- HTML
<form>元素 FormDataEvent