Làm cách nào để nhận các giá trị biểu mẫu khi gửi 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 HTML DOM hay còn gọi là document.forms để truy xuất tất cả các phần tử từ HTML form. 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 id của một phần tử để rút ra thông tin từ đó

Sử dụng document.forms để lấy giá trị biểu mẫu HTML trong JavaScript

Phương thức document.forms 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 bởi 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 document.forms đượ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 document.forms để tương tác với các giá trị HTML form 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à 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 id để 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

  
  
  Test


 
  Enter name:   

  
 
  

3 và

  
  
  Test


 
  Enter name:   

  
 
  

4 để điều khiển đầu vào của 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 document.forms. Vì vậy, các dòng mã sau đây sẽ minh họa bản xem trước

Đoạn mã

  
  
  Test


 
  Enter name:   

  
 
  

var form = document.getElementById["forms"];
form. title = function[e]{
  e.preventDefault[];
var name = document.getElementById["name"].value;
  console.log[name];
document.getElementById['print'].innerHTML=name.toUpperCase[];
}

đầ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

  
  
  Test


 
  Enter name:   

  
 
  

7

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

  
  
  Test


 
  Enter name:   

  
 
  

8 để gửi đầu vào và ở đây chúng tôi đã sử dụng ____11_______9 để thực hiện gửi