Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Get Vaue Input HTML

Cách Get Vaue Input HTML


Ngày 17 Tháng 11 Năm 2021

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ẻ!

Tìm Kiếm Bài Viết

Ads Digital Ocean

Nhận Ngay $100 sử dụng dịch vụ khi đăng ký tài khoản trên DigitalOcean.

Ads azdigi

Sử dụng dịch vụ hosting của Azdigi chỉ với 50.000 đồng.

Ads HostGator

Nhận Ngay Tên Miền Và Chứng Chỉ SSL Miễn Phí Khi Sử Dụng Hosting Của HostGator.

Ads Name Cheap

Đăng Ký Tên Miền Chỉ Với $0.99/năm cùng với Name Cheap.