Hướng dẫn how to get all the input field value in javascript - cách lấy tất cả giá trị trường đầu vào trong javascript

(Xem Cập nhật khi kết thúc câu trả lời.)

Bạn có thể nhận được NodeList của tất cả các phần tử

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

0 thông qua

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

1 (Đặc tả DOM, MDC, MSDN), sau đó chỉ cần lặp qua nó:

var inputs, index;

inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

Ở đó tôi đã sử dụng nó trên

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

2, sẽ tìm kiếm toàn bộ tài liệu. Nó cũng tồn tại trên các yếu tố riêng lẻ (đặc điểm kỹ thuật của DOM), cho phép bạn chỉ tìm kiếm con cháu của họ chứ không phải toàn bộ tài liệu, ví dụ:

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

... Nhưng bạn đã nói rằng bạn không muốn sử dụng cha mẹ

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

3, vì vậy ví dụ đầu tiên có thể áp dụng hơn cho câu hỏi của bạn (thứ hai chỉ ở đó để hoàn thiện, trong trường hợp người khác tìm thấy câu trả lời này cần biết).

---

CẬP NHẬT:

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

1 là một cách hoàn toàn tốt để thực hiện những điều trên, nhưng nếu bạn muốn làm điều gì đó phức tạp hơn một chút, như chỉ tìm tất cả các hộp kiểm thay vì tất cả các yếu tố ____10?:

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

1 is an absolutely fine way to do the above, but what if you want to do something slightly more complicated, like just finding all of the checkboxes instead of all of the

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

0 elements?

Đó là nơi

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

6 hữu ích xuất hiện: nó cho phép chúng tôi có được một danh sách các yếu tố phù hợp với bất kỳ bộ chọn CSS nào chúng tôi muốn. Vì vậy, ví dụ về hộp kiểm của chúng tôi:any CSS selector we want. So for our checkboxes example:

var checkboxes = document.querySelectorAll("input[type=checkbox]");

Bạn cũng có thể sử dụng nó ở cấp độ phần tử. Chẳng hạn, nếu chúng ta có yếu tố

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

7 trong biến

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

8 của mình, chúng ta có thể tìm thấy tất cả các

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

9 với lớp

var checkboxes = document.querySelectorAll("input[type=checkbox]");

0 bên trong

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

7 như thế này:

var fooSpans = element.querySelectorAll("span.foo");

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

6 và anh em họ của nó

var checkboxes = document.querySelectorAll("input[type=checkbox]");

3 (chỉ tìm phần yếu tố phù hợp đầu tiên thay vì cung cấp cho bạn một danh sách) được hỗ trợ bởi tất cả các trình duyệt hiện đại, và cả IE8.

Chủ đề: JavaScript / JQueryPrev | Tiếp theoPrev|Next

Trả lời: Sử dụng thuộc tính var checkboxes = document.querySelectorAll("input[type=checkbox]"); 4

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

var checkboxes = document.querySelectorAll("input[type=checkbox]");

4 của phần tử đầu vào DOM để nhận giá trị của trường đầu vào văn bản.

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

    
    Get Value
    
    

---

Câu hỏi thường gặp liên quan

Dưới đây là một số Câu hỏi thường gặp liên quan đến chủ đề này:

• Cách nhận giá trị của Textarea trong JQuery
• Cách nhận tên tệp được chọn từ tệp loại đầu vào bằng cách sử dụng jQuery
• Cách kiểm tra một chuỗi trống trong JavaScript

Nhận tất cả các phần tử trong một biểu mẫu bằng JavaScript #

Để có được tất cả các yếu tố trong một hình thức:

1. Chọn phần tử biểu mẫu.
2. Sử dụng thuộc tính

   var checkboxes = document.querySelectorAll("input[type=checkbox]");
   

   6 để có được một bộ sưu tập các yếu tố của biểu mẫu.
3. Tùy chọn, chuyển đổi bộ sưu tập thành một mảng bằng phương thức

   var checkboxes = document.querySelectorAll("input[type=checkbox]");
   

   7.

Đây là HTML cho các ví dụ trong bài viết này.

Copied!
DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  head>

  <body>
    <form id="my-form">
      <input type="text" id="first_name" name="first_name" />
      <input type="text" id="last_name" name="last_name" />

      <textarea id="message" name="message" rows="5" cols="30">textarea>

      <input type="submit" value="Submit" />
    form>

    <script src="index.js">script>
  body>
html>

Và đây là mã JavaScript liên quan.

Copied!
const form = document.getElementById('my-form');

// ✅ Get all form elements
const formElements = Array.from(form.elements);

formElements.forEach(element => {
  console.log(element);
});

console.log('-----------------');

// ✅ Get only input elements in form
const onlyInputs = document.querySelectorAll('#my-form input');

onlyInputs.forEach(input => {
  console.log(input);
});

Chúng tôi đã chọn phần tử biểu mẫu bằng phương thức

var checkboxes = document.querySelectorAll("input[type=checkbox]");

8.

Thuộc tính phần tử trên biểu mẫu trả về một bộ sưu tập chứa tất cả các điều khiển biểu mẫu.

Bộ sưu tập bao gồm các yếu tố

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

0, các yếu tố

var fooSpans = element.querySelectorAll("span.foo");

0,

var fooSpans = element.querySelectorAll("span.foo");

1, v.v.

Nếu bạn cần sử dụng bất kỳ phương thức dành riêng cho mảng nào trên bộ sưu tập, hãy chuyển đổi nó thành một mảng bằng phương thức mảng.from.

Hàm chúng tôi đã chuyển sang phương thức Foreach được gọi với mỗi phần tử trong mảng.

Trong ví dụ thứ hai, chúng tôi đã sử dụng phương thức QuerySelectorall để chỉ chọn các phần tử ____10 trong biểu mẫu.

Copied!



const onlyInputs = document.querySelectorAll('#my-form input');
onlyInputs.forEach(input => {
console.log(input);
});

Phương thức lấy một chuỗi chứa bộ chọn CSS hợp lệ làm tham số và trả về NodeList chứa các phần tử phù hợp.

Bộ chọn bạn chuyển sang phương thức

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

6 có thể cụ thể khi cần thiết.

Ví dụ sau đây chỉ chọn các phần tử

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

0 với

var fooSpans = element.querySelectorAll("span.foo");

6 của

var fooSpans = element.querySelectorAll("span.foo");

7 bên trong biểu mẫu.

Copied!
const onlyInputs = document.querySelectorAll(
  '#my-form input[type="text"]'
);

onlyInputs.forEach(input => {
  console.log(input);
});

NodeList trong ví dụ trên không bao gồm phần tử

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

0 có loại

    
    Get Value
    
    

0.