JavaScript được biết đến nhiều nhất để phát triển trang web nhưng nó cũng được sử dụng trong nhiều môi trường không có trình duyệt. Bạn có thể học JavaScript từ đầu bằng cách làm theo Hướng dẫn JavaScript và Ví dụ về JavaScript này
Trong bài đăng này, chúng ta sẽ tìm hiểu chi tiết cách gửi biểu mẫu bằng JavaScript nhưng trước tiên, chúng ta sẽ xem cách tạo biểu mẫu HTML
Tạo biểu mẫu HTML
An HTML form can be created by using the tag that is offered by HTML itself and it takes two attributes:
- Đầu tiên là "hành động" có chứa một URL [xử lý việc gửi quy trình biểu mẫu]
- Thuộc tính thứ hai là “phương thức” có phương thức HTTP
Một phương thức HTTP có thể có nhiều loại khác nhau và hai loại được sử dụng phổ biến nhất là
- GET [được sử dụng để lấy một số dữ liệu từ máy chủ]
- POST [được sử dụng để ghi dữ liệu lên máy chủ]
Tuy nhiên, chúng tôi sẽ không sử dụng hai thuộc tính này trong bài đăng này vì chúng tôi không làm việc với máy chủ
Bây giờ chúng ta hãy viết mã HTML để tạo biểu mẫu
< html lang="vi"
< đầu >
< tiêu đề > Gửi biểu mẫu bằng JavaScript
< /đầu >
< nội dung >
< form id="myForm"
< đầu vào loại="văn bản"
< đầu vào loại="mật khẩu"
< nút loại="gửi"Submit
< /biểu mẫu >
< script src="mã. js" >< /tập lệnh >
< /body >
< /html >
Trong đoạn mã trên, chúng tôi đã tạo một biểu mẫu và cung cấp thuộc tính id cho biểu mẫu có ý nghĩa mà chúng ta sẽ thấy sau một thời gian. Tiếp theo, chúng tôi đã xác định hai trường đầu vào và sau đó xác định một nút có loại gửi. Cuối cùng, chúng tôi đã đặt một thẻ script và tham chiếu tên tệp “code. js” sẽ chứa mã JavaScript của chúng tôi
Truy cập Biểu mẫu và truy xuất Giá trị từ biểu mẫu
Bây giờ chúng ta đã hoàn thành việc tạo biểu mẫu của mình, hãy truy cập biểu mẫu này từ JavaScript và sau đó truy xuất các giá trị của tên người dùng và mật khẩu có trong thẻ biểu mẫu. Để truy cập biểu mẫu, chúng tôi sẽ sử dụng thuộc tính id được đề cập trước đó thông qua đoạn mã sau
var myForm = . getElementById['myForm'];
Theo cách tương tự, chúng ta cũng có thể lấy các giá trị từ các trường đầu vào bằng cách sử dụng thuộc tính id được cung cấp trong biểu mẫu HTML. Sự khác biệt duy nhất là chúng tôi sẽ cung cấp giá trị ở cuối getElementById để chúng tôi có thể truy xuất giá trị từ trường đầu vào chứ không phải chính phần tử đó
var tên người dùng = tài liệu. getElementById['tên người dùng'].giá trị;
var password = tài liệu. getElementById['password'].giá trị;
Gửi biểu mẫu và xác thực dữ liệu
Để gửi biểu mẫu, chúng tôi sẽ sử dụng trình lắng nghe sự kiện để lắng nghe một người nghe được chỉ định liên tục. Một sự kiện chỉ đơn giản là sự tương tác của HTML và JavaScript được kích hoạt bởi người dùng hoặc trình duyệt khi người dùng thao tác trên một trang và sự kiện này được xử lý bởi trình xử lý sự kiện
var myForm = . getElementById['myForm'];
// Trình lắng nghe sự kiện lắng nghe sự kiện gửi
myForm. addEventListener["gửi" , chức năng [e]{
e. ngăn chặn Mặc định[];
//lấy giá trị
var tên người dùng = tài liệu. getElementById['tên người dùng'].giá trị;
var password = tài liệu. getElementById['password'].giá trị;
// xác thực các trường tên người dùng và mật khẩu
if[ tên người dùng =='' || mật khẩu =='']{
cảnh báo ["Vui lòng điền vào tất cả các trường bắt buộc"];
}
khác{
cảnh báo ["Gửi biểu mẫu thành công"];
}
}]
Trong đoạn mã trên, đầu tiên, chúng ta lấy tham chiếu của biểu mẫu bằng thuộc tính id và sau đó khởi tạo một trình lắng nghe sự kiện “gửi” trên biểu mẫu này. Hàm được chỉ định trong trình xử lý sự kiện sẽ được gọi khi người dùng nhấp vào nút gửi
Bên trong chức năng, chúng tôi đã thực hiện xác thực của mình, nghĩa là nếu các trường nhập tên người dùng hoặc mật khẩu trống thì chúng tôi sẽ thấy một thông báo trong hộp cảnh báo cho biết Vui lòng điền tất cả các trường bắt buộc nếu không chúng tôi sẽ nhận được thông báo Gửi biểu mẫu thành công
Hãy để chúng tôi kiểm tra trước bằng cách nhấp vào nút gửi để trống hai trường nhập liệu
Bây giờ chúng ta hãy điền vào hai trường và xem đầu ra
Phần kết luận
Forms are very helpful in gathering data from users and then manipulating or playing with that data in JavaScript. In this post, we took help from an HTML tag to initialize a form and then went on to define two input fields and a button. Next, we accessed the form element inside a javascript file and then retrieved the values of form input fields using the id attribute.
Cuối cùng, chúng tôi đã trả lời câu hỏi về cách gửi biểu mẫu bằng JavaScript bằng cách khởi tạo trình xử lý sự kiện sẽ lắng nghe sự kiện gửi và bất cứ khi nào người dùng nhấp vào nút gửi, sự kiện này sẽ được kích hoạt. Chúng tôi cũng đã xác thực các trường đầu vào của mình bên trong chức năng trình xử lý sự kiện