How to Get the Value of Text Input Field Using JavaScript
In this tutorial, you will learn about getting the value of the text input field using JavaScript. There are several methods are used to get an input textbox value without wrapping the input element inside a form element. Let’s show you each of them separately and point the differences.
The first method uses document.getElementById(‘textboxId’).value to get the value of the box:
You can also use the document.getElementsByClassName(‘className’)[wholeNumber].value method which returns a Live HTMLCollection. HTMLCollection is a set of HTM/XML elements:
Or you can use document.getElementsByTagName(‘tagName’)[wholeNumber].value which is also returns a Live HTMLCollection:
Another method is document.getElementsByName(‘name’)[wholeNumber].value which returns a live NodeList which is a collection of nodes. It includes any HTM/XML element, and text content of a element:
Use the powerful document.querySelector(‘selector’).value which uses a CSS selector to select the element:
There is another method document.querySelectorAll(‘selector’)[wholeNumber].value which is the same as the preceding method, but returns all elements with that selector as a static Nodelist:
Nodelist and HTMLCollection
The HTMLCollection represents a generic collection of elements in document order suggesting methods and properties to select from the list. The HTMLCollection in the HTML DOM is live, meaning when the document is changed it will be automatically updated. NodeList objects are collections of nodes returned by properties such as Node. There are two types of NodeList: live and static. It is static when any change in the DOM does not affect the content of the collection. And live when the changes in the DOM automatically update the collection. You can loop over the items in a NodeList using a for loop. Using for. in or for each. in is not recommended.
Input Text value Property
The value property sets or returns the value of the value attribute of a text field.
The value property contains the default value OR the value a user types in (or a value set by a script).
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| value | Yes | Yes | Yes | Yes | Yes |
Syntax
Return the value property:
Set the value property:
Property Values
| Value | Description |
|---|---|
| text | Specifies the value of the input text field |
Technical Details
| Return Value: | A String, representing the value of the text field |
|---|
More Examples
Example
Get the value of a text field:
Example
var at = document.getElementById("email").value.indexOf("@");
var age = document.getElementById("age").value;
var fname = document.getElementById("fname").value;
submitOK = "true";
if (fname.length > 10) <
alert("The name may have no more than 10 characters");
submitOK = "false";
>
if (isNaN(age) || age < 1 || age > 100) <
alert("The age must be a number between 1 and 100");
submitOK = "false";
>
if (submitOK == "false") <
return false;
>
Example
Dropdown list in a form:
Example
Another dropdown list:
Example
An example that shows the difference between the defaultValue and value property:
How to get an input text value in JavaScript
When I put lol = document.getElementById(‘lolz’).value; outside of the function kk() , like shown above, it doesn’t work, but when I put it inside, it works. Can anyone tell me why?
13 Answers 13
The reason you function doesn’t work when lol is defined outside it, is because the DOM isn’t loaded yet when the JavaScript is first run. Because of that, getElementById will return null (see MDN).
You’ve already found the most obvious solution: by calling getElementById inside the function, the DOM will be loaded and ready by the time the function is called, and the element will be found like you expect it to.
There are a few other solutions. One is to wait until the entire document is loaded, like this:
Note the onload attribute of the <body> tag. (On a side note: the language attribute of the <script> tag is deprecated. Don’t use it.)
There is, however, a problem with onload : it waits until everything (including images, etc.) is loaded.
The other option is to wait until the DOM is ready (which is usually much earlier than onload ). This can be done with «plain» JavaScript, but it’s much easier to use a DOM library like jQuery.
jQuery’s .ready() takes a function as an argument. The function will be run as soon as the DOM is ready. This second example also uses .click() to bind kk’s onclick handler, instead of doing that inline in the HTML.