Làm cách nào để chuyển dữ liệu biểu mẫu sang hàm JavaScript?

Question

Mỗi trường có các thuộc tính type, id và name thích hợp, cùng với nhãn liên quan. Làm cách nào chúng tôi có thể lấy tất cả dữ liệu từ biểu mẫu này sau khi người dùng nhấp vào nút gửi?

Nội dung chính Show

Lấy các trường biểu mẫu từ mục tiêu sự kiện
Đi thành ngữ với FormData
Làm cách nào để chuyển FormData trong js?
Làm cách nào để lấy giá trị từ một biểu mẫu trong JavaScript?
Làm cách nào để lưu trữ FormData trong JavaScript?

Có hai cách. một cái giống như một bản hack bẩn, cái kia sạch hơn và thành ngữ quan trọng nhất

Để làm theo, hãy tạo một tệp có tên

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

0 trong cùng thư mục với biểu mẫu HTML. Hãy xem nào

Lấy các trường biểu mẫu từ mục tiêu sự kiện

Trước hết, chúng tôi đăng ký một trình lắng nghe sự kiện cho sự kiện

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

1 trên biểu mẫu để dừng hành vi mặc định (họ gửi dữ liệu đến back-end)

Sau đó, để truy cập trường biểu mẫu, chúng tôi sử dụng

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

2 hoặc

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

3

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

Ở đây chúng tôi hủy cấu trúc ba trường từ

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

2. Nếu chúng ta biết trước các trường thì phương pháp này có thể chấp nhận được

Thay vào đó, nếu có khả năng nhiều trường hơn sẽ được thêm động để phản hồi lại một số tương tác của người dùng, thì chúng ta cần sử dụng

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

5

Hãy xem làm thế nào

Đi thành ngữ với FormData

Trước hết, chúng tôi đăng ký một trình lắng nghe sự kiện cho sự kiện

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

1 trên biểu mẫu để dừng hành vi mặc định

Sau đó, chúng tôi xây dựng một đối tượng

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

5 từ biểu mẫu

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  // do stuff
});

Ngoài

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

8,

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

9,

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  // do stuff
});

0,

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  // do stuff
});

1,

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

5 cũng thực hiện

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  // do stuff
});

3. Điều này có nghĩa là với

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  // do stuff
});

4

const form = document.forms[0];

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

  for (const formElement of formData) {
    console.log(formElement);
  }
});

Mỗi bước lặp cung cấp cho bạn một mảng các mục, trong đó mỗi mảng có thứ tự

thuộc tính tên của trường biểu mẫu
giá trị đầu vào

Đây là một ví dụ

Ngoài các phương thức đã nói ở trên, phương thức

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  // do stuff
});

5 cung cấp khả năng lấy một loạt các mục

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  const entries = formData.entries(); // array of entries
});

Điều này hoạt động tốt với

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  // do stuff
});

6 (ECMAScript 2019)

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  const entries = formData.entries();
  const data = Object.fromEntries(entries);
});

Tại sao điều này hữu ích?

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  const entries = formData.entries();
  const data = Object.fromEntries(entries);

  // send out to a REST API
  fetch("https://some.endpoint.dev", {
    method: "POST",
    body: JSON.stringify(data),
    headers: {
      "Content-Type": "application/json"
    }
  })
    .then(/**/)
    .catch(/**/);
});

Khi bạn có đối tượng, bạn có thể gửi tải trọng bằng Tìm nạp

cạm bẫy. bỏ thuộc tính name trên các trường biểu mẫu. Các trường biểu mẫu không có thuộc tính name thích hợp không hiển thị trong đối tượng kết quả là

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const { name, description, task } = this.elements;
  // or
  // const { name, description, task } = event.target.elements;
  console.log(name.value, description.value, task.value);
});

5

Làm cách nào để chuyển FormData trong js?

Có 3 cách để gửi dữ liệu biểu mẫu. .

Xây dựng XMLHttpRequest theo cách thủ công

Sử dụng một đối tượng FormData độc lập

Using FormData bound to a

Làm cách nào để lấy giá trị từ một biểu mẫu trong JavaScript?

Điều này có thể được thực hiện bằng cách chuyển sự kiện vào trường onsubmit . Sau đó, chúng tôi có thể sử dụng FormData để truy xuất các giá trị của biểu mẫu chính xác này bằng cách tham chiếu đối tượng SubmitEvent. kiểm tra const = (e) => { const form = new FormData(e. Mục tiêu); .

Làm cách nào để lưu trữ FormData trong JavaScript?

Phương thức dữ liệu biểu mẫu .

append(name, value) – thêm trường biểu mẫu với tên và giá trị đã cho,

append(name, blob, fileName) – add a field as if it were , the third argument fileName sets file name (not form field name), as it were a name of the file in user's filesystem,.

programming javascript

Làm cách nào để chuyển dữ liệu biểu mẫu sang hàm JavaScript?

Lấy các trường biểu mẫu từ mục tiêu sự kiện

Đi thành ngữ với FormData

Làm cách nào để chuyển FormData trong js?

Làm cách nào để lấy giá trị từ một biểu mẫu trong JavaScript?

Làm cách nào để lưu trữ FormData trong JavaScript?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội