Biểu mẫu gửi sự kiện javascript
|
Trong bài viết này mình sẽ giới thiệu đến các bạn sự kiện gửi biểu mẫu trong Javascript, đây là sự kiện giúp bạn kiểm soát hành động gửi biểu mẫu của người dùng khi họ nhấp vào nút gửi Show
Bài viết này đã được đăng tại freetuts. net , không được sao chép dưới mọi hình thức. Khi gửi dữ liệu lên máy chủ, thông thường ta phải kiểm tra định dạng dữ liệu mà người dùng nhập vào có phù hợp hay không, điều này giúp giảm tải ở phía máy chủ trong một số trường hợp Ví dụ bạn tạo một biểu mẫu đăng nhập, nếu bạn không sử dụng Javascript để yêu cầu người dùng nhập đủ thông tin tên đăng nhập và mật khẩu thì rất dễ bị họ gửi liên tục, điều này tạo ra một sức ép về phía máy chủ. Ngược lại phía máy chủ phải rtải qua một bước xác thực dữ liệu nữa rồi mới cập nhật vào cơ sở dữ liệu 1. Khai báo sự kiện gửi biểu mẫu HTML bằng thẻBiểu mẫu HTML có sự kiện gửi, đây chính là nơi mà bạn gọi đến hàm xử lý trước khi hành động gửi xảy ra Bài viết này đã được đăng tại [free tuts. net] Lưu ý rằng hàm validate phải trả về kiểu boolean nhé
Bạn hãy thử tạo một đầu vào gửi bên trong biểu mẫu thẻ, sau đó thiết lập mã ở onsubmit là Nhưng khi bạn đổi sang 0 thì sẽ có hiệu ứng ngay
2. Call to a Javascript function when submitCó ba cách để gọi đến một hàm Javascript khi gửi biểu mẫu như sau Cách 1. Sử dụng HTML như ở phần 1 3. Sử dụng Javascript để gửi biểu mẫuNgoài cách sử dụng thẻ nhập liệu, bạn cũng có thể sử dụng Javascript để thực hiện hành động gửi biểu mẫu Giả sử mình có nút nhập thẻ như sau ________số 8_______ Nếu click vào nút này thì sẽ không xảy ra trường hợp gửi biểu mẫu, bởi đây là một nút chứ không phải nút gửi Bây giờ ta sẽ bổ sung đoạn mã khi click vào nút đó, gọi đến phương thức submit() của form để kích hoạt sự kiện Bạn thử bấm vào nút thì sẽ thấy xảy ra sự kiện gửi biểu mẫu Như vậy là mình đã hướng dẫn xong cách sử dụng Javascript để gửi biểu mẫu, cũng như các thao tác thường gặp khi làm việc với biểu mẫu trong Javascript Trong hướng bài hướng dẫn tự học Javascript này, bạn sẽ được học cách xử lý các sự kiện trong JavaScript Hiểu về Sự kiện và Xử lý sự kiện trong JavascriptSự kiện là điều xảy ra khi người dùng tương tác với trang web, chẳng hạn như khi người dùng nhấp vào một liên kết hoặc nút, nhập văn bản vào hộp văn bản hoặc vùng văn bản, thực hiện lựa chọn trong hộp kiểm, nhấn phím trên bàn phím . v Trong một số trường hợp, Trình duyệt có thể kích hoạt các sự kiện, ví dụ như tải trang và hủy tải các sự kiện
Đây là các hành động nhằm mục đích tạo ra các trang web động / tương tác, trả lời lại cho người dùng bằng Javascript Nếu muốn học lập trình web động đầy đủ, bài bản hơn với chuyên gia, bạn có thể tham khảo tại đây >> Key hoc Lập trình web với PHP >> Key learning Lập trình Java Web Fullstack Theo quy ước, tên của trình lý sự kiện luôn bắt đầu bằng từ 'on', do đó, trình xử lý sự kiện cho sự kiện nhấp chuột được gọi là onclick, tương tự như trình xử lý sự kiện cho sự kiện tải xuống. . v
Ví dụ. Để gán một trình xử lý nhấp chuột cho một nút phần tử, chúng ta có thể sử dụng thuộc tính onclick, như sau Tuy nhiên, để giữ JavaScript tách biệt khỏi HTML, bạn nên thiết lập trình xử lý sự kiện trong tệp JavaScript bên ngoài hoặc trong tập lệnh thẻ và / tập lệnh, ví dụ như sau Thuộc tính HTML không phân biệt chữ hoa chữ thường nên onclick cũng có thể được viết dưới dạng onClick, OnClick hoặc ONCLICK. Nhưng giá trị của nó lại là trường hợp phân biệt hoa thường Nói chung, các sự kiện có thể được phân loại thành bốn nhóm chính - Sự kiện chuột, Sự kiện bàn phím, Sự kiện biểu mẫu và Sự kiện Tài liệu / Cửa sổ Còn có nhiều sự kiện khác, chúng ta sẽ tìm hiểu về chúng trong các bài viết sau. Phần sau đây sẽ cung cấp cho bạn một cái nhìn tổng quan ngắn gọn về từng sự kiện hữu ích nhất cùng với các ví dụ thực thi trong lập trình web thực tế  Hướng xử lý sự kiện trong Javascript 1. Sự kiện chuột trong JavascriptMột sự kiện chuột được kích hoạt khi người dùng nhấp vào một số phần tử, di chuyển con trỏ chuột lên một phần tử, v. v Dưới đây là một số sự kiện chuột quan trọng nhất và quá trình xử lý các sự kiện của họ 1. 1. Sự kiện Click (onclick)Sự kiện nhấp xảy ra khi người dùng nhấp vào một phần tử trên trang web. Thông thường, đây là các phần tử dạng hình thức hoặc liên kết Bạn có thể xử lý một sự kiện nhấp chuột bằng cách xử lý sự kiện onclick Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn nhấp vào các phần tử (nút hoặc liên kết) 1. 2. Event oncontextmenuSự kiện cảnh báo xảy ra khi người dùng nhấp chuột phải vào một phần tử để mở menu ngữ cảnh. Bạn có thể xử lý một cảnh báo sự kiện bằng cách xử lý sự kiện oncontextmenu Ví dụ sau sẽ hiển thị một thông báo cảnh báo khi bạn nhấp chuột phải vào các phần tử 1. 3. Sự kiện di chuột một phần tử (onmouseover)Sự kiện di chuột xảy ra khi người dùng di chuyển con trỏ chuột qua một phần tử Bạn có thể xử lý sự kiện di chuột bằng trình xử lý sự kiện onmouseover Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn đặt chuột lên các phần tử 1. 4. Sự kiện di chuột ra khỏi phần tử (onmouseout)Sự kiện mouseout xảy ra khi người dùng di chuyển con trỏ chuột ra ngoài một phần tử Bạn có thể xử lý sự kiện mouseout bằng trình xử lý sự kiện onmouseout Ví dụ sau đây sẽ hiển thị cho bạn một cảnh báo khi sự kiện mouseout xảy ra 2. Sự kiện bàn phím trong JavascriptMột sự kiện bàn phím được kích hoạt khi người dùng nhấn hoặc giải nén một phím trên bàn phím. Dưới đây là một số sự kiện bàn phím quan trọng nhất và xử lý sự kiện của chúng 2. 1. Sự kiện nhấn phím bất kỳ (onkeydown)Sự kiện nhấn phím xảy ra khi người dùng nhấn phím trên bàn phím Bạn có thể xử lý sự kiện nhấn phím bằng trình xử lý sự kiện onkeydown Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi sự kiện keydown xảy ra 2. 2. Sự kiện giải phóng phím (onkeyup)Sự kiện keyup xảy ra khi người dùng giải phóng một phím trên bàn phím Bạn có thể xử lý sự kiện keyup bằng trình xử lý sự kiện onkeyup. Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi sự kiện keyup xảy ra 2. 3. Sự kiện nhấn phím ký tự (onkeypress)Sự kiện nhấn phím xảy ra khi người dùng nhấn một phím trên bàn phím là một ký tự Ví dụ. các phím như Ctrl, Shift, Alt, Esc, phím mũi tên, v. v. sẽ không tạo ra sự kiện nhấn phím, nhưng sẽ tạo ra sự kiện keydown và keyup Bạn có thể xử lý sự kiện nhấn phím bằng trình xử lý sự kiện onkeypress. Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi sự kiện nhấn phím xảy ra 3. Sự kiện Biểu mẫu trong JavascriptSự kiện biểu mẫu được kích hoạt khi điều khiển biểu mẫu nhận tiêu điểm hoặc khi người dùng sửa đổi giá trị điều khiển biểu mẫu, chẳng hạn như nhập văn bản vào nhập văn bản, chọn bất kỳ tùy chọn nào trong hộp kiểm, v. v Dưới đây là một số hình thức sự kiện quan trọng nhất và cách xử lý các sự kiện của họ 3. 1. Sự kiện focus (onfocus)Sự kiện tập trung xảy ra khi người dùng tập trung vào một phần tử trên trang web Bạn có thể xử lý sự kiện focus bằng trình xử lý sự kiện onfocus Ví dụ sau đây sẽ làm nổi bật nền của kiểu nhập văn bản bằng màu vàng khi nhận được tiêu điểm Lưu ý. Từ khóa chủ đề này cập nhật đến "chính nó" trong cùng một cảnh báo 3. 2. Sự kiện làm mờ (onblur)Sự kiện làm mờ xảy ra khi người dùng bỏ tiêu điểm ra khỏi phần tử của biểu mẫu hoặc một cửa sổ Bạn có thể xử lý sự kiện làm mờ với trình xử lý sự kiện làm mờ. Ví dụ sau sẽ hiển thị cho bạn một cảnh báo khi phần tử nhập văn bản mất tiêu điểm Để điều kiện làm mờ được bật, trước tiên hãy nhấp vào bên trong phần đầu vào tử để tạo tiêu điểm, sau đó nhấn tab phím trên bàn phím, tập trung vào một cái gì đó khác hoặc nhấp vào bên ngoài nó 3. 3. Sự kiện thay đổi (onchange)Sự kiện thay đổi xảy ra khi người dùng thay đổi giá trị của một phần tử biểu mẫu You can handle event change with the process onchange Ví dụ sau sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn thay đổi tùy chọn trong hộp chọn 3. 4. Sự kiện gửi (onsubmit)Sự kiện gửi chỉ xảy ra khi người dùng gửi biểu mẫu trên trang web Bạn có thể xử lý sự kiện gửi với trình xử lý sự kiện onsubmit Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi gửi biểu mẫu đến máy chủ 4. Sự kiện Tài liệu / Cửa sổCác sự kiện cũng được kích hoạt trong các tình huống khi trang được tải xuống hoặc khi người dùng thay đổi kích thước cửa sổ trình duyệt, v. v Dưới đây là một số sự kiện Tài liệu / Cửa sổ quan trọng nhất và quy trình xử lý các sự kiện của họ 4. 1. Sự kiện tải trang (onload)Sự kiện tải trang xảy ra khi một trang web tải xong trong trình duyệt web Bạn có thể xử lý sự kiện tải với trình xử lý sự kiện tải Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo ngay khi trang tải xong 4. 2. Sự kiện hủy tải trang (onunload)Sự kiện hủy tải trang xảy ra khi người dùng rời khỏi trang web hiện tại Bạn có thể xử lý sự kiện tải xuống bằng cách xử lý sự kiện tải xuống Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn cố gắng rời khỏi trang 4. 3. Sự kiện thay đổi kích thước trình duyệt (onresize)Sự kiện thay đổi kích thước trình duyệt xảy ra khi người dùng thay đổi kích thước cửa sổ trình duyệt Sự kiện thay đổi kích thước cũng xảy ra trong các tình huống khi cửa sổ trình duyệt được thu nhỏ hoặc mở rộng Bạn có thể xử lý sự kiện thay đổi kích thước với quá trình xử lý sự kiện onresize Ví dụ sau đây sẽ hiển thị cho bạn một thông báo cảnh báo khi bạn thay đổi kích thước cửa sổ trình duyệt sang chiều rộng và chiều cao mới Bạn đã hiểu về sự kiện trong Javascript chưa?Đây là những sự kiện quan trọng nhất trong Javascript và cách xử lý các sự kiện này Chúng ta sẽ thường thấy các nhiệm vụ này khi thiết lập web thực tế. Hãy cố gắng thực hiện và ghi nhớ nhé |
