FormDataEvent
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
Giao diện FormDataEvent đại diện cho sự kiện formdata, được kích hoạt trên đối tượng HTMLFormElement sau khi danh sách mục đại diện cho dữ liệu biểu mẫu được xây dựng. Điều này xảy ra khi biểu mẫu được gửi, nhưng cũng có thể được kích hoạt bởi lệnh gọi hàm khởi tạo FormData().
Điều này cho phép đối tượng FormData được lấy nhanh chóng để phản hồi với sự kiện formdata, thay vì cần phải tự tổng hợp khi muốn gửi dữ liệu biểu mẫu qua phương thức như fetch() (xem Sử dụng đối tượng FormData).
Hàm khởi tạo
FormDataEvent()-
Tạo phiên bản đối tượng
FormDataEventmới.
Thuộc tính phiên bản
Kế thừa các thuộc tính từ giao diện cha, Event.
FormDataEvent.formData-
Chứa đối tượng
FormDatađại diện cho dữ liệu được chứa trong biểu mẫu khi sự kiện được kích hoạt.
Phương thức phiên bản
Kế thừa các phương thức từ giao diện cha, Event.
Ví dụ
// 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());
});
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| HTML # the-formdataevent-interface |