Làm Việc Với Sự Kiện DOM Của FormData Thế Nào?

Làm Việc Với Sự Kiện DOM Của FormData Thế Nào?

Với HTML5 chúng ta có thể sử dụng FormData, nó cho phép chúng ta xây dựng các đối tượng form tự động, có thể bao gồm cả các tệp tin từ hệ thống tệp tin của người dùng và sau đó gửi form này thông qua AJAX.

FormData là gì?

Hãy làm rõ FormData là gì trước khi đi vào chi tiết hơn. Với các nhà phát triển web, các biểu mẫu HTML có thể tạo ra các sự kiện. Đây là một tính năng của hầu hết mọi phần tử HTML.

Hãy xem xét biểu mẫu sau: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML forms and JavaScript</title>
</head>
<body>
<form>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>

    <label for="description">Short description</label>
    <input type="text" id="description" name="description" required>

    <label for="task">Task</label>
    <textarea id="task" name="task" required></textarea>

    <button type="submit">Submit</button>
</form>
</body>
<script src="form.js"></script>
</html>

Khi biểu mẫu được gửi đi, nghĩa là, khi người dùng điền vào các trường và nhấp vào nút "Submit", một sự kiện có tên là submit sẽ được gửi đi.

Điều đó có nghĩa là chúng ta có thể lắng nghe sự kiện được gửi với một trình nghe sự kiện:

// form.js
const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
});

Việc gọi PreventDefault() ngăn chặn việc làm mới trang, thuận tiện khi bạn không muốn gửi các trường biểu mẫu trên cơ sở dữ liệu.

Bây giờ, có một số cách để lấy dữ liệu thực tế từ biểu mẫu. Bạn có thể sử dụng event.target.elements trong trường hợp bạn muốn lấy tất cả phần tử, hoặc tốt hơn nữa bạn có thể sử dụng FormData - là một DOM interface, như một constructor. Nó cần biểu mẫu làm đối số:

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const data = new FormData(form);
});

Từ bây giờ bạn có thể làm tất cả mọi thứ trên đối tượng FormData. Bây giờ chúng ta hãy khám phá sự kiện formdata.

Làm quen với sự kiện formdata

Sự kiện formdata là một bổ sung mới hơn, hay hơn cho nền tảng web. Như một sự thúc đẩy cho FormData, sự kiện được kích hoạt bất kỳ lúc nào bạn gọi new FormData(). Hãy xem xét ví dụ sau:

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  new FormData(form);
});

form.addEventListener("formdata", event => {
  // event.formData grabs the object
  console.log(event.formData);
});

Trong trình nghe sự kiện đầu tiên, mình xây dựng một FormData mới từ biểu mẫu. Nhưng lần này không cần phải lưu kết quả trong một biến.

Để đáp lại lệnh gọi này, đối tượng mới sẽ kích hoạt sự kiện formdata, trong đó chúng ta sẽ tạo ra một trình nghe khác. Trong trình nghe sự kiện thứ 2 này chúng ta có thể lấy dữ liệu thực tế từ event.formData.

Mẫu này giúp tách trình nghe sự kiện đầu tiên khỏi bất kỳ lệnh gọi lại(callback) nào khác được cho là xử lý dữ liệu biểu mẫu thực tế(thực hiện gọi API, v.v.).

Trong phần tiếp theo, chúng ta sẽ xem cách lấy dữ liệu từ một đối tượng FormData.

Lấy dữ liệu từ đối tượng FormData

Nếu bạn muốn chuyển đối tượng FormData, hãy truy cập biểu mẫu HTML mẫu trong trình duyệt và đặt một breakpoint trên console.log(event.formData).

Điền và gửi biểu mẫu khi mở bảng điều khiển của trình duyệt và lưu đối tượng dưới dạng biến toàn cục. Bạn sẽ có thể truy cập đối tượng (temp1) trong Chrome:

console.log(temp1)
// FormData {append: ƒ, delete: ƒ, get: ƒ, getAll: ƒ, has: ƒ, …}

Như bạn có thể thấy, nó có rất nhiều phương thức. Để trích xuất một mảng giá trị, sử dụng phương thức values()

const values = [...temp1.values()]
// sample output
// ["Khoa", "Trip to London", "Trip to New York"]

Để trích xuất một mảng các mục nhập (các cặp key/value), sử dụng phương thức entries()

const entries = [...temp1.entries()]

Trong ví dụ dưới đây, chúng ta có thể lấy tất cả dữ liệu ở nhiều dạng khác nhau từ đối tượng FormData:

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  new FormData(form);
});

form.addEventListener("formdata", event => {
  const data = event.formData;

  // get the data
  const entries = [...data.entries()];
  console.log(entries);

  const values = [...data.values()];
  console.log(values);
});

Có một lưu ý là: FormData dựa trên các thuộc tính tên trường biểu mẫu (name attributesđể xây dựng ánh xạ giữa các trường và giá trị. Điều đó có nghĩa là các yếu tố sau đây sẽ không mang lại bất cứ điều gì:

<!-- bad -->
<input type="text" id="name" required>
<input type="text" id="description" required>

Hãy nhớ rằng luôn cung cấp tên cho các trường của bạn:

<!-- good -->
<input type="text" id="name" name="name" required>
<input type="text" id="description" name="description" required>

Bởi vì là một bổ sung mới cho nền tảng web, formdata không khả dụng trong các trình duyệt cũ hơn, hãy sử dụng một cách thận trọng.

Tạm kết

Javascript ngày càng phát triển mạnh mẽ, mọi thứ sẽ giúp chúng ta xử lý mọi thao tác theo một cách dễ dàng, tối ưu và nhanh nhất. Hãy thử và cho mình thêm nhiều cách giải hay nữa nhé các bạn. Cảm ơn các bạn đã đọc!

Nếu các bạn thấy bài viết hữu ích hãy rate 5* và share cho mọi người tham khảo! Hãy để lại comment để mình có thể hoàn thiện bản thân hơn trong tương lai. Cám ơn các bạn!

Nguồn tham khảo: