Tại Cafedev, chúng tôi hiểu rằng việc xử lý biểu mẫu là một phần quan trọng trong phát triển web. Trong hướng dẫn này, bạn sẽ học cách sử dụng sự kiện và phương thức `submit` trong JavaScript để quản lý việc gửi biểu mẫu từ cơ bản đến nâng cao. Chúng tôi sẽ hướng dẫn bạn cách kiểm tra dữ liệu trước khi gửi, cũng như cách tự động gửi biểu mẫu bằng JavaScript, giúp bạn tối ưu hóa quy trình và tăng cường khả năng tương tác của người dùng với ứng dụng web của mình.
Sự kiện submit xảy ra khi biểu mẫu được gửi đi, thường được sử dụng để kiểm tra biểu mẫu trước khi gửi đến máy chủ hoặc để hủy bỏ việc gửi và xử lý nó bằng JavaScript.
Phương thức form.submit() cho phép khởi tạo việc gửi biểu mẫu từ JavaScript. Chúng ta có thể sử dụng nó để tạo và gửi các biểu mẫu của riêng mình đến máy chủ một cách động.
Hãy cùng xem thêm chi tiết về chúng.
Nội dung chính
1. Sự kiện: submit
Có hai cách chính để gửi biểu mẫu:
1. Cách đầu tiên là nhấp vào <input type="submit"> hoặc <input type="image">.
2. Cách thứ hai là nhấn key:Enter trên một trường nhập liệu.
Cả hai hành động đều dẫn đến sự kiện submit trên biểu mẫu. Bộ xử lý sự kiện có thể kiểm tra dữ liệu, và nếu có lỗi, 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ủ.
Trong biểu mẫu dưới đây:
- Đi vào trường văn bản và nhấn
key:Enter. - Nhấp 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 vì 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>Liên quan tới submit and click
Khi một biểu mẫu được gửi bằng cách nhấn key:Enter trên một trường nhập liệu, một sự kiện click sẽ xảy ra trên <input type="submit">.
Điều này khá thú vị, vì không có cú nhấp chuột nào cả.
Đây là bản demo:
<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 thức: submit
Để gửi một biểu mẫu đến máy chủ một cách thủ công, chúng ta có thể gọi form.submit().
Khi đó, sự kiện submit sẽ không được tạo ra. Người ta giả định rằng nếu lập trình viên 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 điều này được sử dụng để tạo và gửi một biểu mẫu một cách thủ công, như thế này:
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();Tại Cafedev, chúng tôi đã khám phá cách sử dụng sự kiện và phương thức `submit` trong JavaScript để quản lý biểu mẫu một cách hiệu quả. Hy vọng rằng bạn đã nắm bắt được cách kiểm tra và gửi biểu mẫu, cũng như cách sử dụng các phương thức này để nâng cao trải nghiệm người dùng. Tiếp tục thực hành và áp dụng kiến thức này vào các dự án của bạn để phát triển kỹ năng JavaScript từ cơ bản đến nâng cao. Hãy theo dõi Cafedev để cập nhật thêm các hướng dẫn hữu ích khác!
Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Javascrypt chi tiết, dễ hiểu từ cơ bản tới nâng cao + Full Bài Tập thực hành nâng cao trình dev
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
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!
