There are several ways to get the content of an input box in JavaScript:
Method 1
document.getElementById('textbox_id').value // Get the content of the specified id
Example
document.getElementById("searchTxt").value;
Note: The following methods 2, 3, 4, and 6 return a collection of elements, which can be accessed by index [index]
to get a specific element, the first element uses [0]
, the second element uses [1]
, and so on...
Method 2
Use the following method to return an HTMLCollection:
document.getElementsByClassName('class_name')[index].value
The HTMLCollection interface represents a collection of elements (in the order they appear in the document flow) that is a generic collection of elements (similar to an array-like object like arguments) and provides methods and properties to select elements from this collection.
In the HTML DOM, the HTMLCollection is live; it automatically updates when the document structure it contains changes.
Example
document.getElementsByClassName("searchField")[0].value;
Method 3
Get an HTMLCollection by tag name:
document.getElementsByTagName('tag_name')[index].value
Example
Get the content by the input tag name:
document.getElementsByTagName("input")[0].value;
Method 4
The following returns a NodeList, the NodeList object is a collection of nodes, usually returned by properties such as Node.childNodes and methods, such as document.querySelectorAll.
The NodeList is a live collection, meaning that if the node tree in the document changes, the NodeList will also change.
document.getElementsByName('name')[index].value
Example
Get the content by the name attribute set on the element:
document.getElementsByName("searchTxt")[0].value; // The name attribute value is searchTxt
Method 5
Use CSS selectors to get it, this method is more powerful:
document.querySelector('selector').value // selector is a CSS selector
Example
Example
document.querySelector('#searchTxt').value; // Get by id
document.querySelector('.searchField').value; // Get by class class
document.querySelector('input').value; // Get by tag name
document.querySelector('[name="searchTxt"]').value; // Get by name attribute and value
Method 6
querySelectorAll can return all elements that match the CSS selector, which is a Nodelist.
document.querySelectorAll('selector')[index].value
Example
Example
document.querySelectorAll('#searchTxt')[0].value; // Get by id
document.querySelectorAll('.searchField')[0].value; // Get by class class
document.querySelectorAll('input')[0].value; // Get by tag name
document.querySelectorAll('[name="searchTxt"]')[0].value; // Get by name attribute and value
Reference Content
-JavaScript getElementById() Method
-JavaScript getElementsByClassName() Method
-JavaScript getElementsByTagName() Method
-JavaScript getElementsByName() Method
-JavaScript querySelector() Method
-JavaScript querySelectorAll() Method
**Click to Share Notes
-
-
-