programming javascript

Khi gửi nhận giá trị đầu vào JavaScript

Bạn chỉ cần sử dụng thuộc tính

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

7 của phần tử đầu vào DOM để lấy giá trị của trường nhập văn bản

Ví dụ sau sẽ hiển thị văn bản đã nhập trong trường nhập khi nhấp vào nút bằng JavaScript

Để nhận bất kỳ trường

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

8 nào theo chỉ mục hoặc

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

9 của trường đó [khi sự kiện

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

0 được kích hoạt], bạn có thể thực hiện bất kỳ thao tác nào sau đây

Truy cập trường biểu mẫu bằng thuộc tính

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

Truy cập trực tiếp vào trường biểu mẫu

Truy cập các trường biểu mẫu qua

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

1 trên Gửi sự kiện

Khi trình xử lý sự kiện

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

0 được gắn vào phần tử

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

8, thì

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

2 đề cập đến chính phần tử

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

8. Do đó, bạn có thể truy cập các trường biểu mẫu bằng cách sử dụng tên hoặc chỉ mục của chúng trên đối tượng

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

1 [hoặc đối tượng

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

5 trong trường hợp này], chẳng hạn như vậy

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

Điều này hiệu quả vì thuộc tính

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

1 thực sự trả về một đối tượng

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

7, cho phép truy cập tất cả các trường biểu mẫu có trong phần tử

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

8 bằng cách sử dụng chỉ mục và/hoặc chỉ mục của phần tử.

Đối tượng

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

7 cũng có các phương thức sau để truy cập các trường biểu mẫu

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.namedItem['fullName'];
    const emailInput = formFields.item[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

1 [hoặc

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.namedItem['fullName'];
    const emailInput = formFields.item[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

2];

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.namedItem['fullName'];
    const emailInput = formFields.item[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

3 [hoặc

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.namedItem['fullName'];
    const emailInput = formFields.item[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

Sự khác biệt chính giữa hai - tôi. e. truy cập các trường biểu mẫu trực tiếp trên đối tượng

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

7 so với làm như vậy thông qua các phương thức nêu trên — thực tế là phương thức trước sẽ trả về

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.namedItem['fullName'];
    const emailInput = formFields.item[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

6 nếu phần tử không tồn tại, trong khi phương thức sau sẽ trả về

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.namedItem['fullName'];
    const emailInput = formFields.item[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

Do đó, thay vào đó, bạn cũng có thể truy cập các trường biểu mẫu thông qua các phương thức này như được hiển thị bên dưới

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.namedItem['fullName'];
    const emailInput = formFields.item[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

Truy cập trực tiếp các trường biểu mẫu khi gửi sự kiện

Khi trình xử lý sự kiện

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

0 được gắn vào phần tử

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

8, thì

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

2 đề cập đến chính phần tử

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

8. Do đó, bạn có thể truy cập trực tiếp vào các trường biểu mẫu bằng cách sử dụng tên hoặc chỉ mục của chúng trực tiếp trên đối tượng

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

2, chẳng hạn như vậy

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

Đây có thể không phải là cách tiếp cận tốt nhất vì các thuộc tính có thể bị lẫn lộn với các thuộc tính khác được chỉ định trên phần tử

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

8. Thay vào đó, sử dụng thuộc tính

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

54 có thể là cách tiếp cận tốt hơn vì nó chỉ trả về các trường biểu mẫu có trong phần tử

document.getElementById['form'].addEventListener['submit', function [event] {
    event.preventDefault[];

    const form = event.target;
    const formFields = form.elements;

    const fullNameInput = formFields.fullName;
    const emailInput = formFields[1];

    console.log[fullNameInput.value]; // output: 'foo bar'
    console.log[emailInput.value]; // output: '[email protected]'
}, false];

Hy vọng bạn tìm thấy bài viết này hữu ích. Nó được xuất bản vào ngày 14 tháng 9 năm 2022. Hãy thể hiện tình yêu và sự ủng hộ của bạn bằng cách

Làm cách nào để nhận giá trị đầu vào khi gửi trong JavaScript?

Cách lấy giá trị của đầu vào bằng JavaScript .

hàm getVal[] {

const val = tài liệu. querySelector['đầu vào']. giá trị;

nhật ký [giá trị];

Cách nhận giá trị từ đầu vào sau khi gửi?

Cách lấy giá trị của biểu mẫu đầu vào khi gửi trong React .

Tạo một biến trạng thái để lưu trữ giá trị của đầu vào

Đặt trình xử lý sự kiện onChange trên đầu vào để cập nhật biến trạng thái khi giá trị của đầu vào thay đổi

Đặt trình xử lý sự kiện onSubmit trên phần tử biểu mẫu

Làm cách nào để lấy đầu vào biểu mẫu trong JavaScript?

Để truy cập các trường biểu mẫu, bạn có thể sử dụng các phương thức DOM như getElementsByName[] , getElementById[] , querySelector[] , v.v. . Ngoài ra, bạn có thể sử dụng thuộc tính phần tử của đối tượng biểu mẫu. Hình thức. thuộc tính phần tử lưu trữ một tập hợp các phần tử biểu mẫu.

Truy cập trực tiếp các trường biểu mẫu khi gửi sự kiện

Làm cách nào để nhận giá trị đầu vào khi gửi trong JavaScript?

Cách nhận giá trị từ đầu vào sau khi gửi?

Làm cách nào để lấy đầu vào biểu mẫu trong JavaScript?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề