How Do I Get the Value of an Input Text Field in JavaScript?

Getting Input Text Field Values in JavaScript

In response to your query, several methods are available for retrieving the value of an input text field directly without using forms.

Method 1: Using getElementById()

document.getElementById('textbox_id').value retrieves the value of the desired text input field directly.

document.getElementById("searchTxt").value; // Get the value of the searchTxt text field

Method 2: Using getElementsByClassName()

document.getElementsByClassName('class_name')[whole_number].value returns a live HTMLCollection and can be used to select the desired text field based on its class.

document.getElementsByClassName("searchField")[0].value; // Get the value of the first text field with class "searchField"

Method 3: Using getElementsByTagName()

document.getElementsByTagName('input')[whole_number].value also returns a live HTMLCollection and allows you to select the desired text field based on its tag name.

document.getElementsByTagName("input")[0].value; // Get the value of the first text input field

Method 4: Using getElementsByName()

document.getElementsByName('name')[whole_number].value returns a live NodeList and can be used to select the desired text field based on its name attribute.

document.getElementsByName("searchTxt")[0].value; // Get the value of the first text field with name "searchTxt"

Method 5: Using querySelector()

document.querySelector('selector').value uses a CSS selector to select the desired text field.

document.querySelector('#searchTxt').value; // Get the value of the text field with id "searchTxt"

Method 6: Using querySelectorAll()

document.querySelectorAll('selector')[whole_number].value also uses a CSS selector to select the desired text field, but returns a static NodeList.

document.querySelectorAll('.searchField')[0].value; // Get the value of the first text field with class "searchField"

The table below provides browser compatibility information for these methods:

The above is the detailed content of How Do I Get the Value of an Input Text Field in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!