How do I get the value of text input field using JavaScript?

I am working on a search with JavaScript. I would use a form, but it messes up something else on my page. I have this input text field:



And this is my JavaScript code:

function searchURL(){
window.location = "http://www.myurl.com/search/" + (input text value);
}



How do I get the value from the text field into JavaScript?

There are various methods to get an input textbox value directly (without wrapping the input element inside a form element):
Method 1

document.getElementById('textbox_id').value to get the value of
desired box
For example

document.getElementById("searchTxt").value;

 
Note: Method 2,3,4 and 6 returns a collection of elements, so use [whole_number] to get the desired occurrence. For the first element, use [0],
for the second one use [1], and so on...
Method 2

Use
document.getElementsByClassName('class_name')[whole_number].value which returns a Live HTMLCollection
For example

document.getElementsByClassName("searchField")[0].value; if this is the first textbox in your page.
Method 3

Use document.getElementsByTagName('tag_name')[whole_number].value which also returns a live HTMLCollection
For example

document.getElementsByTagName("input")[0].value;, if this is the first textbox in your page.
Method 4

document.getElementsByName('name')[whole_number].value which also >returns a live NodeList
For example

document.getElementsByName("searchTxt")[0].value; if this is the first textbox with name 'searchtext' in your page.
Method 5

Use the powerful document.querySelector('selector').value which uses a CSS selector to select the element
For example

• document.querySelector('#searchTxt').value; selected by id

• document.querySelector('.searchField').value; selected by class

• document.querySelector('input').value; selected by tagname

• document.querySelector('[name="searchTxt"]').value; selected by name

Method 6

document.querySelectorAll('selector')[whole_number].value which also uses a CSS selector to select elements, but it returns all elements with that selector as a static Nodelist.
For example

• document.querySelectorAll('#searchTxt')[0].value; selected by id

• document.querySelectorAll('.searchField')[0].value; selected by class

• document.querySelectorAll('input')[0].value; selected by tagname

• document.querySelectorAll('[name="searchTxt"]')[0].value; selected by name

Support

Browser
Method1
Method2
Method3
Method4
Method5/6

IE6
Y(Buggy)
N
Y
Y(Buggy)
N

IE7
Y(Buggy)
N
Y
Y(Buggy)
N

IE8
Y
N
Y
Y(Buggy)
Y

IE9
Y
Y
Y
Y(Buggy)
Y

IE10
Y
Y
Y
Y
Y

FF3.0
Y
Y
Y
Y
N

FF3.5/FF3.6
Y
Y
Y
Y
Y

FF4b1
Y
Y
Y
Y
Y

GC4/GC5
Y
Y
Y
Y
Y Y=YES,N=NO

Safari4/Safari5
Y
Y
Y
Y
Y

Opera10.10/

Opera10.53/
Y
Y
Y
Y(Buggy)
Y

Opera10.60

Opera 12
Y
Y
Y
Y
Y

Key:

IE=Internet Explorer

FF=Mozilla Firefox

GC=Google Chrome

Useful links

• To see the support of these methods with all the bugs including more details click here

• Difference Between Static collections and Live collections click Here

• Difference Between NodeList and HTMLCollection click Here

Stack Overflow Q#11563638, score: 2472