Lấy giá trị trong javascript

Có rất nhiều cách khác nhau để lấy giá trị của input trong JavaScript. Đây là kiến thức quan trọng với lập trình viên website. Các giá trị của input sau khi được lấy sẽ dùng để xử lý hoặc lưu trữ theo mong muốn của lập trình viên. Hãy cùng tìm hiểu những cách lấy giá trị của input trong JavaScript qua bài viết sau.

Mục lục

• 1. Tại sao phải lấy giá trị của input trong JavaScript?
• 2. Những cách lấy giá trị của input trong JavaScript
  • 2.1. Sử dụng getElementById và hàm value
  • 2.2. Sử dụng getElementsByClassName và hàm value
  • 2.3. Sử dụng getElementsByTagName và hàm value

1. Tại sao phải lấy giá trị của input trong JavaScript?

JavaScript là ngôn ngữ phổ biến để lập trình website. JavaScript sẽ giúp người dùng tương tác với trang web một cách dễ dàng. Một trong những tính năng mạnh mẽ của JavaScript là DOM hay còn gọi là Document Object Model. Tính năng này sẽ giúp JavaScript xử lý các thành phần của HTML cấu tạo nên website. 

Một trong những thành phần quan trọng của HTML là form. Form sẽ giúp người dùng nhập thông tin vào website. Các thông tin này sau đó sẽ được gửi đến server và xử lý hoặc được lưu trữ tùy theo mong muốn và chức năng của trang web. Các form sẽ tạo nên các trường input để giúp người dùng có thể nhập thông tin rõ hơn.

Giá trị của input trong JavaScript sẽ được sử dụng để thu thập các thông tin này. JavaScript có khả năng xác định được vị trí của form và lấy các thông tin từ form input. Các thông tin sẽ giúp lập trình viên giải quyết được vấn đề mà người dùng đang gặp phải.

2. Những cách lấy giá trị của input trong JavaScript

Có khá nhiều cách để lấy giá trị input trong JavaScript. Tuy nhiên, nhìn chung thì các tính năng này đều sử dụng hàm value. Các input của JavaScript sẽ được nhập vào từ các textbox. Bạn hãy dùng các cách sau đây để lấy input từ textbox:

2.1. Sử dụng getElementById và hàm value

Để sử dụng cách lấy giá trị input trong JavaScript. Ta có thể dùng getElementById và hàm value. Đầu tiên, bạn cần gán cho textbox 1 Id. Và đó sử dụng đoạn code: 

• document.getElementById(“mã_id_của_textbox”).value

2.2. Sử dụng getElementsByClassName và hàm value

Với cách lấy giá trị của input này, ta sẽ sử dụng getElementsByClassName và hàm Value. Bạn hãy gán cho các textbox của trang web một class name. Sau đó, dùng đoạn code sau đây:

• document.getElementsByClassName(“tên_class_của_textbox”).[0].value

Nếu bạn muốn lấy giá trị input ô textbox đầu tiên của trang web thì hãy dùng số 0. Tùy theo vị trí của ô textbox mà bạn hãy chọn số phù hợp. Giá trị sẽ bắt đầu từ số 0 cho vị trí một và tăng dần lên.

2.3. Sử dụng getElementsByTagName và hàm value

Đây là cách cuối cùng bạn có thể dùng để lấy giá trị của input. Bạn hãy cùng đoạn code sau, ý nghĩa của trị số 0 cũng tương tự như cách bạn lấy input bằng class name ở cách thứ 2.

• document.getElementsByTagName(“tag_name_của_textbox”).[0].value

Các input của khách hàng sẽ giúp bạn xử lý thông tin khi cần thiết cũng như phục vụ cho các tính năng của trang web. Lấy giá trị của input trong JavaScript là kiến thức quan trọng mà bạn cần nắm vững để có thể phân tích tốt tình trạng của website.

• Tìm hiểu thêm: Các cách lập trình hướng đối tượng trong JavaScript

Ngày hôm nay mình sẽ giới thiệu đến bạn cách để lấy giá trị trong ô input bằng Javascript nhé.

Cách Get Vaue Input HTML

Sau đây mình sẽ giới thiệu đến bạn các cách để chúng ta có thể lấy được giá trị của ô input trong Javascript nha.

Sử Dụng getElementById

Trong phần này mình sẽ lấy value của ô input thông qua thuộc tính getElementById của js nha.

HTML

<!--www.niemvuilaptrinh.com-->
<form onsubmit="submitForm(event)">
  <input type="text" placeholder="niemvuilaptrinh" id="valueInput">
  <input type="submit" />
</form>
<div id="results"></div>

Javascript

function submitForm(event){ 
   event.preventDefault();
  var ele = document.getElementById("valueInput");
  document.getElementById('results').innerHTML =  `Giá Trị ô input ${ele.value}`
}

Ở đoạn mã javascript mình sử dụng event.preventDefault() ngăn không cho form submit để chúng ta có thể dễ dàng hiển thị kết quả của ô input. Còn nếu dùng trong thực tế thì bạn không cần sử dụng tính năng nhé.

Và kết quả bạn xem trên Codepen nha.

See the Pen Untitled by haycuoilennao19 (@haycuoilennao19) on CodePen.

Sử Dụng getElementsByClassName

Tiếp theo mình sẽ sử dụng getElementsByClassName để lấy giá trị trong ô input text thông qua cú pháp sau nha:

document.getElementsByClassName('Tên Class')[Số thứ tự].value

Ở đây mình xin giải thích một tý là trong một trang HTML thì sẽ có các phần tử có class trùng với nhau. Do đó bạn cần phải xác định được vị trí ô input để sử dụng cho đúng nha. Dưới đây là ví dụ nha trên Codepen nha.

See the Pen get value input by class name by haycuoilennao19 (@haycuoilennao19) on CodePen.

Sử Dụng getElementsTagClassName

Phần này mình sẽ sử dụng document.getElementsByTagName để lấy giá trị thông qua cú pháp sau nha:

document.getElementsByTagName('tên thẻ')[số thứ tự]

Nó cũng giống như class là cũng cần phải sử dụng số thự tự nha. Để dễ hình dung bạn xem kết quả dưới đây nhé.

See the Pen get value input by tag name by haycuoilennao19 (@haycuoilennao19) on CodePen.

Sử Dụng Jquery

Phần cuối cùng mình sẽ hướng dẫn bạn sử dụng thuộc tính keyup của thư viện Jquery để lấy nội dung trong ô input mỗi khi người dùng nhập vào nhé.

HTML

<!--www.niemvuilaptrinh.com-->
<script   src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<input type="text" placeholder="niemvuilaptrinh" id="valueInput">
<div id="results"></div>

Javascript

$('#valueInput').keyup(function() {
    var ele = this.value;
    document.getElementById('results').innerHTML =  `Giá Trị ô input ${ele}`;
});

Và kết quả bạn xem dưới đây nhé!

See the Pen get value input by Jquery by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn kiến thức lấy giá trị ô input cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!