HTMLFormElement: sự kiện submit
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Sự kiện submit được kích hoạt khi một <form> được gửi.
Lưu ý rằng sự kiện submit được kích hoạt trên chính phần tử <form>, chứ không phải trên bất kỳ <button> hoặc <input type="submit"> nào bên trong nó. Tuy nhiên, SubmitEvent được gửi để cho biết hành vi gửi biểu mẫu đã được kích hoạt bao gồm một thuộc tính submitter, là nút đã được nhấp để kích hoạt yêu cầu gửi.
Sự kiện submit được kích hoạt khi:
- người dùng nhấp vào submit button,
- người dùng nhấn Enter trong khi chỉnh sửa một trường (ví dụ: <input type="text">) trong biểu mẫu,
- một script gọi phương thức
form.requestSubmit()
Tuy nhiên, sự kiện không được gửi đến biểu mẫu khi một script gọi trực tiếp phương thức form.submit().
Cú pháp
Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc đặt một thuộc tính trình xử lý sự kiện.
addEventListener("submit", (event) => { })
onsubmit = (event) => { }
Loại sự kiện
Một SubmitEvent. Kế thừa từ Event.
Thuộc tính sự kiện
Ngoài các thuộc tính được liệt kê dưới đây, giao diện này kế thừa các thuộc tính từ giao diện cha của nó, Event.
submitterRead only-
Một đối tượng
HTMLElementxác định nút hoặc phần tử khác đã được kích hoạt để gửi biểu mẫu.
Ví dụ
Ví dụ này sử dụng EventTarget.addEventListener() để lắng nghe sự kiện submit của biểu mẫu, và ghi lại Event.timeStamp hiện tại mỗi khi điều đó xảy ra, sau đó ngăn chặn hành vi mặc định của việc gửi biểu mẫu.
HTML
<form id="form">
<label>Trường kiểm tra: <input type="text" /></label>
<br /><br />
<button type="submit">Gửi biểu mẫu</button>
</form>
<p id="log"></p>
JavaScript
const form = document.getElementById("form");
const log = document.getElementById("log");
function logSubmit(event) {
log.textContent = `Biểu mẫu đã được gửi! Timestamp: ${event.timeStamp}`;
event.preventDefault();
}
form.addEventListener("submit", logSubmit);
Kết quả
Đặc điểm kỹ thuật
| Thông số kỹ thuật |
|---|
| HTML # event-submit |
| HTML # handler-onsubmit |