Làm cách nào để nhận giá trị nút gửi trong HTML?

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tìm giá trị của nút bằng JavaScript. Đôi khi, chúng ta cần sử dụng thẻ nút bên trong thẻ biểu mẫu, nơi chúng tôi gán một giá trị đặc biệt duy nhất cho mỗi giá trị được liên kết với

phần tử sử dụng thuộc tính giá trị. Điều này sau này giúp nhà phát triển xác định duy nhất các phần tử trong khi làm việc với chúng ở phần cuối. JavaScript cung cấp cho chúng ta thuộc tính value để lấy giá trị được truyền bên trong thuộc tính value

Hãy để chúng tôi thảo luận chi tiết về tài sản giá trị

Giá trị nút Thuộc tính

Thuộc tính giá trị của nút được sử dụng để lấy giá trị của thuộc tính giá trị của nút

cú pháp

Sau đây là cú pháp lấy giá trị của thuộc tính value của nút

let varName = document.getElementById["id"].value;

bước

• Bước 1 - Trước tiên, chúng tôi tạo một nút bên trong biểu mẫu có giá trị được liên kết với thuộc tính giá trị
• Bước 2 - Tiếp theo, chúng tôi nhắm mục tiêu phần tử nút bằng id của nó và lấy giá trị của thuộc tính giá trị bằng cách sử dụng thuộc tính giá trị
• Bước 3 - Ở bước cuối cùng, chúng tôi sẽ hiển thị giá trị được trích xuất từ ​​thuộc tính giá trị trên màn hình người dùng

Hãy để chúng tôi hiểu nó với sự trợ giúp của một số ví dụ về chương trình

ví dụ 1

Ví dụ dưới đây sẽ minh họa việc sử dụng thuộc tính value để lấy giá trị của thuộc tính value của nút

   

  

Find the value of a button
   
      click me!
   
   
   

Trong ví dụ này, chúng ta đã thấy cách chúng ta có thể sử dụng thuộc tính giá trị để lấy giá trị bên trong nút. Đầu tiên, chúng tôi lấy phần tử được nhắm mục tiêu bằng cách sử dụng id của nó trong btn và sau đó sử dụng thuộc tính giá trị trên đó để lấy giá trị của thuộc tính giá trị bên trong nó

Hãy để chúng tôi thảo luận thêm một ví dụ trong đó chúng tôi sẽ gán cùng một giá trị cho thẻ nút như được cung cấp bên trong thuộc tính giá trị một cách linh hoạt bằng cách sử dụng JavaScript

• Bước 1 - Trong bước này, chúng tôi sẽ xác định thẻ nút không có bất kỳ văn bản nào bên trong nhưng có thuộc tính giá trị được liên kết với giá trị cụ thể
• Bước 2 - Trong bước thứ hai, chúng tôi sẽ lấy phần tử có id của nó, lấy giá trị của thuộc tính giá trị bằng cách sử dụng thuộc tính giá trị và sau đó gán cùng một giá trị cho văn bản nút bằng cách sử dụng thuộc tính InternalHTML hoặc thuộc tính InternalText của JavaScript_
• Bước 3 - Trong bước thứ ba, chúng tôi sẽ hiển thị giá trị của thuộc tính giá trị và sẽ khớp nó với văn bản của thẻ nút để xác nhận việc gán

ví dụ 2

Ví dụ dưới đây sẽ giải thích cách chúng ta có thể gán văn bản bên trong cho nút tương tự như giá trị của thuộc tính value bằng cách sử dụng thuộc tính value

   
Find the value of a button with JavaScript
   
      Submit_button
   
   
   

Trong ví dụ trên, chúng ta đã thấy cách chúng ta có thể gán văn bản cho nút tương tự như giá trị của thuộc tính value một cách linh hoạt bằng cách sử dụng thuộc tính value của JavaScript. Trong ví dụ này, sau khi lấy phần tử, chúng tôi lưu trữ giá trị trong một biến cụ thể, sau đó gán giá trị đó làm văn bản của nút bằng thuộc tính InternalHTML của JavaScript

Hãy để chúng tôi thảo luận thêm một ví dụ trong đó chúng tôi sẽ thay đổi văn bản đã cho của nút thành giá trị của thuộc tính giá trị

• Bước 1 - Trong bước này, chúng tôi sẽ xác định thẻ nút có văn bản bên trong và cũng là thuộc tính giá trị được liên kết với giá trị cụ thể
• Bước 2 - Trong bước thứ hai, chúng tôi sẽ lấy phần tử có id của nó, lấy giá trị của thuộc tính giá trị bằng cách sử dụng thuộc tính giá trị và sau đó cập nhật văn bản của thẻ nút với giá trị mà chúng tôi nhận được, sử dụng thuộc tính InternalHTML hoặc thuộc tính InternalText của JavaScript_
• Bước 3 – Trong bước thứ ba, chúng tôi sẽ hiển thị giá trị của thuộc tính giá trị và sẽ khớp giá trị đó với văn bản được cập nhật của thẻ nút để xác nhận xem mã có hoạt động hay không

ví dụ 3

Ví dụ dưới đây sẽ minh họa việc sử dụng thuộc tính giá trị để thay đổi văn bản của thẻ nút chỉ bằng cách nhấp vào nút

   
Find the value of a button with JavaScript
   
      click to change the text!
   
   
   

Trong ví dụ trên, chúng tôi có nếu bạn nhấp chuột để thay đổi văn bản. Nút nó sẽ tự động thay đổi văn bản của nút thành giá trị bên trong thuộc tính giá trị của thẻ nút

Trong hướng dẫn này, chúng ta đã thảo luận về thuộc tính giá trị của JavaScript được sử dụng để lấy giá trị của thuộc tính giá trị bên trong bất kỳ thẻ HTML nào. Chúng tôi cũng đã tìm hiểu cách chúng tôi có thể thay đổi động văn bản bên trong thẻ nút thành giá trị của thuộc tính giá trị bằng cách sử dụng thuộc tính giá trị. Chúng tôi có thể thay đổi văn bản của bất kỳ thẻ nào bằng các phương pháp được thảo luận ở trên

Tiết lộ. Hỗ trợ của bạn giúp giữ cho trang web hoạt động. Chúng tôi kiếm được phí giới thiệu cho một số dịch vụ chúng tôi đề xuất trên trang này. Tìm hiểu thêm

Giá trị của Cách xác định loại đầu vào trong HTML [Tất cả các giá trị và thuộc tính] How Input Type Submit Creates Form Submit Buttons In HTML làm gì? Xác định một nút được nhấp để gửi biểu mẫu

nội dung

• 1 Ví dụ về mã
• 2 Trình duyệt hỗ trợ gửi
• 3 Tất cả giá trị của loại
• 4 Tất cả các thuộc tính của đầu vào

Mã ví dụ

 Type a fake password here

Nhập mật khẩu giả vào đây

Giá trị submit của input hiển thị nút Gửi trên biểu mẫu. Nhấp vào nút này sẽ gửi dữ liệu biểu mẫu

Nếu bạn muốn sử dụng hình ảnh thay cho nút Gửi, hãy sử dụng kiểu đầu vào image

Claire Broadley

Claire là nhà văn, biên tập viên kỹ thuật dày dạn kinh nghiệm và người đam mê HTML. Cô ấy viết cho HTML. com và điều hành một công ty nội dung, Red Robot Media

Làm cách nào để nhận giá trị từ nút gửi trong HTML?

Nút gửi có thể có giá trị không?

Gửi giá trị trong HTML là gì?

Làm cách nào để sử dụng nút gửi trong HTML?