Chức năng gọi sau khi gửi biểu mẫu JavaScript

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ục

Giới thiệu

Từ 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

Để 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

 … 

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

   


       
       
           Subscribe
       
   

Ở 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ử

   


       
       
           Subscribe
       
   

   


       
       
           Subscribe
       
   

Nhà phát triển cũng có thể sử dụng

   


       
       
           Subscribe
       
   

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

Người giới thiệu

1. “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

Bản tóm tắt. trong hướng dẫn này, bạn sẽ tìm hiểu về JavaScript form API. truy cập biểu mẫu, nhận giá trị của các phần tử, xác thực dữ liệu biểu mẫu và gửi biểu mẫu

Khái niệm cơ bản về biểu mẫu

Để tạo biểu mẫu trong HTML, bạn sử dụng phần tử

document.forms
Code language: JavaScript (javascript)

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

Phần tử

document.forms
Code language: JavaScript (javascript)

document.forms[0]
Code language: CSS (css)

document.forms[0]
Code language: CSS (css)

• Thuộc tính

  document.forms[0]
  Code language: CSS (css)

  1 chỉ định một URL sẽ xử lý việc gửi biểu mẫu. Trong ví dụ này, hành động là URL

  document.forms[0]
  Code language: CSS (css)

  4
• Thuộc tính

  document.forms[0]
  Code language: CSS (css)

  2 chỉ định phương thức HTTP để gửi biểu mẫu với. Thông thường, phương pháp này là

  document.forms[0]
  Code language: CSS (css)

  6 hoặc

  document.forms[0]
  Code language: CSS (css)

  7

Nói chung, bạn sử dụng phương pháp

document.forms[0]
Code language: CSS (css)

document.forms[0]
Code language: CSS (css)

JavaScript sử dụng đối tượng

   


       
       
           Subscribe
       
   

   


       
       
           Subscribe
       
   

• document.forms[0]
  Code language: CSS (css)

  1 – là URL xử lý dữ liệu biểu mẫu. Nó tương đương với thuộc tính

  document.forms[0]
  Code language: CSS (css)

  1 của phần tử

  document.forms
  Code language: JavaScript (javascript)

  9

• document.forms[0]
  Code language: CSS (css)

  2 – là phương thức HTTP tương đương với thuộc tính

  document.forms[0]
  Code language: CSS (css)

  2 của phần tử

  document.forms
  Code language: JavaScript (javascript)

  9

Phần tử

   


       
       
           Subscribe
       
   

• 
     
  
  
         
         
             Subscribe
         
     
  
  

  59 – gửi biểu mẫu

• 50 – đặt lại biểu mẫu

biểu mẫu tham khảo

Để tham chiếu phần tử

document.forms
Code language: JavaScript (javascript)

Một tài liệu HTML có thể có nhiều biểu mẫu. Thuộc tính

document.forms
Code language: JavaScript (javascript)

Để tham khảo một biểu mẫu, bạn sử dụng một chỉ mục. Ví dụ: câu lệnh sau trả về dạng đầu tiên của tài liệu HTML

document.forms[0]
Code language: CSS (css)

Gửi biểu mẫu

Thông thường, một biểu mẫu có một nút gửi. Khi bạn nhấp vào nó, trình duyệt sẽ gửi dữ liệu biểu mẫu đến máy chủ. Để tạo nút gửi, bạn sử dụng phần tử

   


       
       
           Subscribe
       
   

Hoặc

Nếu nút gửi có tiêu điểm và bạn nhấn phím

Khi bạn gửi biểu mẫu, sự kiện

Để đính kèm một trình lắng nghe sự kiện vào sự kiện

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

Để dừng gửi biểu mẫu, bạn gọi phương thức

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

Thông thường, bạn gọi phương thức

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

   


       
       
           Subscribe
       
   

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

Lưu ý rằng

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

Truy cập các trường biểu mẫu

Để truy cập các trường biểu mẫu, bạn có thể sử dụng các phương thức DOM như

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

Ngoài ra, bạn có thể sử dụng thuộc tính

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

JavaScript cho phép bạn truy cập một phần tử theo chỉ mục, id hoặc tên. Giả sử rằng bạn có biểu mẫu đăng ký sau với hai phần tử

document.forms
Code language: JavaScript (javascript)

Để truy cập các phần tử của biểu mẫu, trước tiên bạn lấy phần tử biểu mẫu

Và sử dụng chỉ mục, id hoặc tên để truy cập phần tử. Phần sau truy cập phần tử biểu mẫu đầu tiên

Phần sau truy cập phần tử đầu vào thứ hai

Sau khi truy cập một trường biểu mẫu, bạn có thể sử dụng thuộc tính

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

Đặt nó tất cả cùng nhau. hình thức đăng ký

Sau đây minh họa tài liệu HTML có biểu mẫu đăng ký. Xem demo trực tiếp tại đây

Tài liệu HTML tham khảo các tệp

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

Gửi biểu mẫu mà không cung cấp bất kỳ thông tin nào sẽ dẫn đến lỗi sau

Gửi biểu mẫu có tên nhưng định dạng địa chỉ email không hợp lệ sẽ dẫn đến lỗi sau

Phần sau hiển thị tệp

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

Làm thế nào nó hoạt động

Hàm showMessage()

Hàm

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

Sau đây hiển thị trường nhập tên trên biểu mẫu

Nếu giá trị của tên trống, trước tiên bạn cần lấy cha của nó là

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

Tiếp theo, bạn cần chọn phần tử

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

Sau đó, cập nhật tin nhắn

document.forms
Code language: JavaScript (javascript)

Sau đó, chúng tôi thay đổi lớp CSS của trường đầu vào dựa trên giá trị của tham số loại. Nếu loại là đúng, chúng tôi thay đổi lớp của đầu vào thành công. Nếu không, chúng tôi thay đổi lớp thành lỗi

document.forms
Code language: JavaScript (javascript)

Cuối cùng, trả về giá trị của loại

document.forms
Code language: JavaScript (javascript)

Hàm showError() và showSuccess()

Các hàm

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

document.forms
Code language: JavaScript (javascript)

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

document.forms
Code language: JavaScript (javascript)

Hàm hasValue()

Hàm

document.forms
Code language: JavaScript (javascript)

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

document.forms
Code language: JavaScript (javascript)

Hàm xác thựcEmail()

Hàm

document.forms
Code language: JavaScript (javascript)

document.forms
Code language: JavaScript (javascript)

Hàm

document.forms
Code language: JavaScript (javascript)

document.forms
Code language: JavaScript (javascript)

document.forms
Code language: JavaScript (javascript)

Để xác thực email, nó sử dụng biểu thức chính quy. Nếu email không hợp lệ, hàm

document.forms
Code language: JavaScript (javascript)

Điều gì xảy ra khi một biểu mẫu được gửi bằng JavaScript?

Làm cách nào để gọi hàm JavaScript mà không cần nhấp vào nút trong HTML?