Mỗi trường có các thuộc tính
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];
}];
4, 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 và 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];
}];
6 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 để đáp ứng vớ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òn triển khai 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à nó có thể lặp lại 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 { name, description, task } = this.elements;
// or
// const { name, description, task } = event.target.elements;
console.log[name.value, description.value, task.value];
}];
7Mỗ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 mảng các mụcconst 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Đ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 { name, description, task } = this.elements;
// or
// const { name, description, task } = event.target.elements;
console.log[name.value, description.value, task.value];
}];
1Tại sao điều này hữu ích?
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];
}];
2Khi 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
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];
}];
6 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 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];
}];
6 phù hợp sẽ 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