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:

Browser	Method 1	Method 2	Method 3	Method 4	Method 5/6
IE6	Buggy	No	Yes	Buggy	No
IE7	Buggy	No	Yes	Buggy	No
IE8	Yes	No	Yes	Buggy	Yes
IE9	Yes	Yes	Yes	Buggy	Yes
IE10	Yes	Yes	Yes	Yes	Yes
FF3.0	Yes	Yes	Yes	Yes	No
FF3.5/FF3.6	Yes	Yes	Yes	Yes	Yes
FF4b1	Yes	Yes	Yes	Yes	Yes
GC4/GC5	Yes	Yes	Yes	Yes	Yes and Yes
Safari4/Safari5	Yes	Yes	Yes	Yes	Yes
Opera10.10/
Opera10.53/	Yes	Yes	Yes	Buggy	Yes
Opera10.60
Opera 12	Yes	Yes	Yes	Yes	Yes

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!