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?
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àoLấ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];
}];
3const 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 đượcThay 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];
}];
5Hã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 địnhSau đó, 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ẫuconst 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
}];
4const 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ụcconst 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["//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