Cách lấy giá trị biểu mẫu trong javascript

Trong JavaScript, chúng ta có thể sử dụng thuộc tính id của một phần tử đầu vào cụ thể để lấy các giá trị hoặc kích hoạt thuộc tính name để truy cập các giá trị

Cả hai quy ước sẽ tiến hành lấy dữ liệu thô từ người dùng. Về mặt kỹ thuật, mục tiêu là lấy tất cả thông tin đầu vào từ người dùng và đảm bảo quy trình đang hoạt động

Ở đây chúng ta sẽ làm việc với

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

9 hay còn gọi là

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

0 để lấy tất cả các phần tử từ

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

1. Giới thiệu ngắn gọn về các phương pháp có sẵn để tương tác với các phần tử và thuộc tính HTML có tại đây

Ngoài ra, trong ví dụ của chúng tôi, chúng tôi sẽ sử dụng cách thông thường để xác định

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

2 của một phần tử để rút ra thông tin từ đó

Sử dụng var form = document.forms['form']; form.onsubmit = function(e){ e.preventDefault(); var select = document.form.fruit.value; console.log(select); document.getElementById('print').innerHTML=select.toUpperCase(); } 0 để lấy giá trị biểu mẫu HTML trong JavaScript

Phương thức

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

0 lấy thuộc tính

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

0 để định vị biểu mẫu và phần tử của nó. Về mặt chiến thuật, tất cả các giá trị từ biểu mẫu sẽ được chuyển qua cách bắt đầu này

Chúng ta sẽ có một phần tử

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

1 theo sau là một phần tử nhiều

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

2. Và chúng tôi sẽ chọn một tùy chọn từ đó và giá trị sẽ được phân tách

Sau đó, khi

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

0 được bắt đầu, nó sẽ lấy giá trị riêng biệt. Hãy kiểm tra khối mã để có hình ảnh phù hợp

Đoạn mã

  
  
  Test




  
  
  
  

  Hit

  

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

đầu ra

Như bạn có thể thấy, đối tượng

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

4 sử dụng phương thức

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

0 để tương tác với các giá trị của

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

1 sẽ trả về tất cả các phần tử

Phương pháp

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

7 thực hiện hành động tiếp theo để làm việc với giá trị đã chọn đó. Trong ví dụ, đối tượng

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

1 nhận giá trị mong muốn với thuộc tính

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

0 tương ứng của phần tử

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

4 và

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

1

Sau đó, chúng tôi đã in giá trị ở định dạng chữ hoa trên trang

Sử dụng var form = document.forms['form']; form.onsubmit = function(e){ e.preventDefault(); var select = document.form.fruit.value; console.log(select); document.getElementById('print').innerHTML=select.toUpperCase(); } 2 để truy cập giá trị biểu mẫu HTML trong JavaScript

Đối với ví dụ này, chúng tôi sẽ sử dụng

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

13,

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

14 để điều khiển đầu vào biểu mẫu

Cơ sở để sử dụng định dạng này là phổ biến và hoạt động tương tự như phương pháp

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

0. Vì vậy, các dòng mã sau đây sẽ minh họa bản xem trước

Đoạn mã

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

1

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

4

đầu ra

Biểu mẫu được truy cập bởi đối tượng

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

4 trong JavaScript và giá trị của đầu vào cũng được lấy từ phương thức

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

17

Trong ví dụ trước, chúng tôi đã sử dụng phần tử

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

18 để gửi đầu vào và ở đây chúng tôi đã sử dụng

var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

19 để thực hiện gửi

Tôi làm cách nào để lấy dữ liệu biểu mẫu bằng JavaScript?

Làm cách nào chúng tôi có thể thu thập dữ liệu từ biểu mẫu trong HTML?

Nhận giá trị trong JavaScript là gì?