Làm cách nào để bạn thu thập dữ liệu từ một biểu mẫu trong html?

Chào mừng bạn đến với hướng dẫn nhanh về cách lấy dữ liệu biểu mẫu HTML trong Javascript. Vì vậy, bạn có một biểu mẫu HTML nhưng muốn thực hiện xử lý trong Javascript thay thế?

Để lấy dữ liệu biểu mẫu HTML trong Javascript

  1. Tạo một đối tượng dữ liệu biểu mẫu mới –
    
    
    Name
    Email
    Gender
    Pets
    Marital Status
    4
  2. Gán ID cho các trường biểu mẫu. Ví dụ,
    
    
    Name
    Email
    Gender
    Pets
    Marital Status
    5
  3. Cuối cùng, nối giá trị vào đối tượng dữ liệu biểu mẫu.
    
    
    Name
    Email
    Gender
    Pets
    Marital Status
    6

Điều đó bao gồm những điều cơ bản, nhưng hãy đọc để biết thêm ví dụ

ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào

 

 

TRANG TRÌNH BÀY NHANH

Làm cách nào để bạn thu thập dữ liệu từ một biểu mẫu trong html?
Tải xuống & Ghi chú
Làm cách nào để bạn thu thập dữ liệu từ một biểu mẫu trong html?
Nhận dữ liệu biểu mẫu
Làm cách nào để bạn thu thập dữ liệu từ một biểu mẫu trong html?
Bit và liên kết hữu ích
Làm cách nào để bạn thu thập dữ liệu từ một biểu mẫu trong html?
Kết thúc

 

TẢI XUỐNG & LƯU Ý

Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa

 

GHI CHÚ NHANH

Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình

 

MÃ VÍ DỤ TẢI XUỐNG

Nhấp vào đây để tải xuống tất cả mã nguồn ví dụ, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn đó hoặc sử dụng nó trong dự án của riêng bạn

 

 

JAVASCRIPT NHẬN DỮ LIỆU MẪU

Được rồi, bây giờ chúng ta hãy đi vào các ví dụ về cách lấy dữ liệu biểu mẫu trong Javascript

 

1) NHẬN CÁC LĨNH VỰC CÁ NHÂN

1-cơ bản. html


Name
Email

Như trong phần giới thiệu ở trên, tất cả những gì chúng ta cần là

  • Tạo một đối tượng
    
    
    Name
    Email
    Gender
    Pets
    Marital Status
    7
  • Nối vào đối tượng dữ liệu biểu mẫu
    
    
    Name
    Email
    Gender
    Pets
    Marital Status
    8

 

 

2) NHẬN NHIỀU LĨNH VỰC

2-được-nhiều. html


Name
Email
Gender
Pets
Marital Status

Trong ví dụ trước, chúng ta phải lấy thủ công từng trường. Nó hoạt động tốt nếu không có nhiều trường, nhưng đây là cách tốt hơn để xử lý các biểu mẫu lớn – Thoạt nhìn có thể phức tạp, nhưng hãy bình tĩnh và xem xét cẩn thận

  • Chỉ định một
    
    
    Name
    Email
    Gender
    Pets
    Marital Status
    9 cho chính
    
    
    Name
    Email
    Gender
    Pets
    Marital Status
    0
  • Thay vì nhận từng trường một, chúng tôi sử dụng
    
    
    Name
    Email
    Gender
    Pets
    Marital Status
    0 để nhận nhiều trường biểu mẫu, vùng văn bản, danh sách thả xuống, hộp kiểm và nút radio
  • Cuối cùng, lặp qua tất cả các trường
    
    
    Name
    Email
    Gender
    Pets
    Marital Status
    1 và thu thập dữ liệu một cách có chọn lọc

 

 

3) CÁCH DỄ DÀNG & CÁCH GỬI DỮ LIỆU MẪU

3-ajax. html


Name
Email

Cuối cùng, đây là cách lười nhất và nhanh nhất

  • Đảm bảo rằng tất cả các trường HTML đều có thuộc tính
    
    
    Name
    Email
    Gender
    Pets
    Marital Status
    2 phù hợp
  • Chỉ cần chuyển toàn bộ biểu mẫu vào đối tượng dữ liệu biểu mẫu –
    
    
    Name
    Email
    Gender
    Pets
    Marital Status
    3
  • Điều này sẽ tự động tìm nạp tất cả các trường biểu mẫu –
    
    
    Name
    Email
    Gender
    Pets
    Marital Status
    4

Đây là tùy chọn tốt nhất cho các bạn không làm việc với biểu mẫu động (ví dụ: tắt một số phần nhất định nếu người dùng chọn một tùy chọn). Đối với việc gửi biểu mẫu đến máy chủ

  • Tạo một đối tượng
    
    
    Name
    Email
    Gender
    Pets
    Marital Status
    5
  • Đặt phương thức gửi (đăng hoặc nhận) và URL mục tiêu –
    
    
    Name
    Email
    Gender
    Pets
    Marital Status
    6
  • Tùy chọn, xác định những việc cần làm sau khi gửi biểu mẫu –
    
    
    Name
    Email
    Gender
    Pets
    Marital Status
    7
  • Cuối cùng, gửi dữ liệu biểu mẫu ra –
    
    
    Name
    Email
    Gender
    Pets
    Marital Status
    8

P. S. Điểm nổi bật nhanh là lệnh gọi AJAX sẽ chỉ hoạt động với 


Name
Email
Gender
Pets
Marital Status
9, không phải với

Name
Email
0

 

 

BIT & LIÊN KẾT HỮU ÍCH

Đó là tất cả những gì dành cho hướng dẫn và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn

 

LIÊN KẾT và THAM KHẢO

  • Nhận phần tử theo Id – MDN
  • Dữ liệu biểu mẫu – MDN
  • Gửi biểu mẫu mà không cần tải lại – Code Boxx
  • Hiển thị thông báo sau khi gửi biểu mẫu – Code Boxx

 

BẢNG CHEAT INFOGRAPHIC

Cảm ơn bạn đã đọc, và chúng tôi đã đi đến cuối. Tôi hy vọng rằng nó đã giúp bạn hiểu rõ hơn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc

Dữ liệu biểu mẫu HTML đi đâu?

Dữ liệu gửi biểu mẫu được gửi đến máy chủ web . 'Hành động' thường trỏ đến URL của tập lệnh biết phải làm gì với dữ liệu.

Làm thế nào để một hình thức gửi dữ liệu đến máy chủ?

Sau khi xác thực biểu mẫu ở phía máy khách, Biểu mẫu đã sẵn sàng để gửi. Sau khi gửi, dữ liệu biểu mẫu gửi đến máy chủ bằng phương thức GET và phương thức POST . Khi chúng tôi sẽ sử dụng phương thức GET để gửi dữ liệu biểu mẫu đến máy chủ, sau đó chúng tôi sẽ sử dụng phương thức POST để gửi dữ liệu biểu mẫu đến máy chủ.