Cafedev chia sẻ về Sự kiện submit kích hoạt khi biểu mẫu được gửi, nó thường được sử dụng để xác thực biểu mẫu trước khi gửi đến máy chủ hoặc để hủy gửi và xử lý bằng JavaScript.
Phương thức này form.submit() cho phép bắt đầu gửi biểu mẫu từ JavaScript. Chúng ta có thể sử dụng nó để tạo động và gửi các biểu mẫu của chúng ta tới máy chủ.
Chúng ta hãy xem thêm chi tiết của họ.
Nội dung chính
1. Sự kiện: nộp(submit)
Có hai cách chính để gửi biểu mẫu:
- Lần đầu tiên – để nhấp
<input type="submit">or<input type="image">. - Lần thứ hai – nhấn Enter vào một trường đầu vào.
Cả hai hành động đều dẫn đến sự kiện submit trên biểu mẫu. Trình xử lý có thể kiểm tra dữ liệu và nếu có lỗi, hãy hiển thị chúng và gọi event.preventDefault(), sau đó biểu mẫu sẽ không được gửi đến máy chủ.
Theo mẫu bên dưới:
- Đi vào trường văn bản và nhấn Enter.
- Bấm vào
<input type="submit">.
Cả hai hành động đều hiển thị alert và biểu mẫu không được gửi đi bất kỳ đâu do return false:
<form onsubmit="alert('submit!');return false">
First: Enter in the input field <input type="text" value="text"><br>
Second: Click "submit": <input type="submit" value="Submit">
</form>Mối quan hệ giữa submit và click
Khi một biểu mẫu được gửi bằng cách sử dụng trường Enter đầu vào, một sự kiện click sẽ kích hoạt trên <input type="submit">.
Điều đó khá buồn cười, bởi vì không có nhấp chuột nào cả.
Đây là bản demo:
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<form onsubmit="return false">
<input type="text" size="30" value="Focus here and press enter">
<input type="submit" value="Submit" onclick="alert('click')">
</form>2. Phương pháp: nộp(submit)
Để gửi biểu mẫu đến máy chủ theo cách thủ công, chúng ta có thể gọi form.submit().
Sau đó, sự kiện submit không được tạo. Giả định rằng nếu người lập trình gọi form.submit(), thì tập lệnh đã thực hiện tất cả các xử lý liên quan.
Đôi khi, nó được sử dụng để tạo và gửi biểu mẫu theo cách thủ công, như sau:
let form = document.createElement('form');
form.action = 'https://google.com/search';
form.method = 'GET';
form.innerHTML = '<input name="q" value="test">';
// the form must be in the document to submit it
document.body.append(form);
form.submit();Nguồn và tài liệu tiếng anh tham khảo:
Full series tự học Javascript từ cơ bản tới nâng cao tại đây nha.
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
