Hành động biểu mẫu chạy chức năng javascript
|
Trong hướng dẫn JavaScript này, bạn sẽ học cách gọi hàm JavaScript trên biểu mẫu gửi. Nói một cách dễ hiểu, bạn có thể nói rằng cách chạy chức năng JavaScript khi ai đó nhấp vào nút gửi. Điều này sẽ rất hữu ích cho bạn. Nếu bạn đã quen thuộc với thuật ngữ xác thực biểu mẫu JavaScript thì bạn có thể hiểu rằng hướng dẫn này có liên quan đến điều đó Show
Trong hướng dẫn trước, tôi đã giải thích bằng một ví dụ Tạo trình xác thực biểu mẫu JavaScript đơn giản. Bạn có thể đi qua cái này. bài viết này sẽ hữu ích cho bạn Gọi hàm javascript trên biểu mẫu gửiVì vậy, bây giờ tôi sẽ tạo một biểu mẫu HTML và sau đó tôi sẽ tạo một hàm JavaScript. Sau đây, tôi sẽ chỉ cho bạn cách gọi hàm JavaScript đó khi người dùng nhấp vào nút gửi của biểu mẫu đó. Tôi hy vọng nếu bạn làm theo những gì tôi sắp làm ở đây từng bước, bạn sẽ hiểu dễ dàng. Hãy bắt đầu Ghi chú. Trong ví dụ trên, Internet Explorer 7 và các phiên bản cũ hơn trả về "/action_page. php", trong khi IE 8+, Firefox, Opera, Chrome và Safari trả về toàn bộ URL. "https. //www. w3schools. com/action_page. php" Sự kiện onsubmit xảy ra khi bạn cố gắng gửi biểu mẫu. Bạn có thể đặt xác thực biểu mẫu của mình đối với loại sự kiện này. Ví dụ sau đây cho thấy cách sử dụng onsubmit. Ở đây chúng tôi đang gọi một hàm validate() trước khi gửi dữ liệu biểu mẫu tới máy chủ web. Nếu hàm validate() trả về true thì form sẽ được gửi, ngược lại sẽ không gửi dữ liệu Đoạn mã HTML …  Bài viết này giải thích thuộc tính biểu mẫu …5 của JavaScript. Nó truy cập biểu mẫu, nhận giá trị của tất cả các trường, xác thực dữ liệu biểu mẫu và gửi nó đến đúng đích. Hãy xem những thuộc tính hành động này là gì và chúng hoạt động như thế nào Chúng ta có thể tạo một biểu mẫu theo cách này Mẫu thuộc tính … 5 trong JavaScriptThuộc tính …5 chỉ định nơi gửi dữ liệu biểu mẫu khi được gửi cú pháp … 5 Giá trị thuộc tính
Biểu mẫu … 5 Ví dụ thuộc tính sử dụng HTMLGửi dữ liệu biểu mẫu đến một liên kết nhất định để xử lý đầu vào khi gửi Một ví dụ khác sử dụng JavaScript hành động biểu mẫuVí dụ sau bao gồm một HTML từ việc sử dụng thuộc tính biểu mẫu …5 Chúng tôi đã thêm Cách thay thế để sử dụng thuộc tính hành động biểu mẫu trong JavaScriptCó thể đạt được kết quả tương tự khi sử dụng sự kiện cú pháp ________số 8 Thí dụ Trong ví dụ trên, sự kiện Nhà phát triển web thường sẽ sử dụng hàm JavaScript để gửi biểu mẫu JavaScript khi họ muốn thay đổi loại nội dung thành JSON để gửi phía máy chủ thông qua yêu cầu HTTP Mục lụcGiới thiệuTừ khi một người ở đất nước này trở thành một thanh niên, anh ta sẽ thường thấy mình trong tình huống điền vào biểu mẫu HTML. Nó có thể là một cái gì đó đơn giản và trần tục như đăng ký để sử dụng ứng dụng truyền thông xã hội yêu thích của anh ấy hoặc cô ấy Như đã nói, có nhiều trường hợp sử dụng trong Phát triển web trong đó Ứng dụng web sẽ phải xử lý hành vi gửi biểu mẫu và có một số cách để gửi biểu mẫu. Có thể xử lý việc gửi biểu mẫu bằng thuộc tính hành động của phần tử hoặc nhà phát triển có thể chọn sử dụng chức năng javascript thay thế. Tất nhiên, một nhà phát triển cũng có thể làm cả haiĐể sử dụng thuộc tính hành động của thành phần biểu mẫu, biểu mẫu sẽ giống như sau …2 Trong ví dụ trên, loại nội dung là application/x-www-form-urlencoded. Loại nội dung này thường được xử lý bởi tệp PHP. URL của tệp PHP này sẽ là giá trị của thuộc tính hành động Mặt khác, nhà phát triển web thường sẽ sử dụng hàm JavaScript khi họ muốn thay đổi loại nội dung thành JSON để gửi phía máy chủ thông qua yêu cầu HTTP. Hàm javascript này có thể được gọi từ các thuộc tính cụ thể trên hoặc trong biểu mẫu hoặc sự kiện gửi có thể được sử dụng làm tham số trong phương thức addEventListener. Chúng tôi thường gọi hàm JavaScript này là trình xử lý sự kiện. Trình xử lý sự kiện lấy một đối tượng sự kiện làm một trong các tham số của nó Hãy nhìn vào một số mãMột ví dụ khá đơn giản về biểu mẫu HTML sẽ như sau …3 Ở trên, là mã HTML của một hình thức đăng ký phổ biến. Trong số những thứ khác, biểu mẫu HTML này chứa hai phần tử Nhà phát triển cũng có thể sử dụng Một ví dụ về trình xử lý sự kiện xử lý sự kiện gửi của biểu mẫu HTML ở trên sẽ như sau ________số 8 Người giới thiệu1. “Hình thức – Phản ứng. ” Phản ứng, https. //reacjs. org/tài liệu/biểu mẫu. html. Truy cập ngày 21 tháng 8 năm 2022 2. “sự kiện onsubmit. ” W3Schools, https. //www. w3schools. com/jsref/event_onsubmit. asp. Truy cập ngày 21 tháng 8 năm 2022 3. “HTMLFormElement. gửi sự kiện - API Web. MDN. ” MDN Web Docs, ngày 9 tháng 7 năm 2022, https. // nhà phát triển. mozilla. org/en-US/docs/Web/API/HTMLFormElement/submit\_event. Truy cập ngày 21 tháng 8 năm 2022 4. “Gửi biểu mẫu dữ liệu - Tìm hiểu phát triển web. MDN. ” MDN Web Docs, ngày 15 tháng 8 năm 2022, https. // nhà phát triển. mozilla. org/en-US/docs/Learn/Forms/Sending\_ and\_ retrieving\form\data. Truy cập ngày 21 tháng 8 năm 2022 Làm cách nào để gọi một hàm JavaScript trong hành động biểu mẫu?Để gọi và chạy một hàm JavaScript từ một sự kiện gửi biểu mẫu HTML, bạn cần phải gán hàm mà bạn muốn chạy cho thuộc tính sự kiện onsubmit. By assigning the test() function to the onsubmit attribute, the test() function will be called every time the form is submitted.
Làm cách nào để chuyển dữ liệu biểu mẫu sang hàm JavaScript?Có một biểu mẫu XHTML bao gồm 3 hộp văn bản và một nút gửi. Khi nhấn nút gửi, dữ liệu trong các hộp văn bản phải được gửi và chúng phải được JavaScript xác định và phải chuyển các giá trị biến đó tới một cảnh báo .
Làm cách nào để chạy một hàm JavaScript trong HTML?Để đưa tệp JavaScript của chúng ta vào tài liệu HTML, chúng ta phải sử dụng thẻ script js"> và trong thuộc tính "src", chúng tôi phải cung cấp đường dẫn đến tệp JavaScript nơi tệp được lưu trữ.
Chức năng của hành động biểu mẫu trong HTML là gì?Thuộc tính hành động chỉ định nơi gửi dữ liệu biểu mẫu khi biểu mẫu được gửi . |
