How do I get the value of text input field using 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/6IE6              Y(Buggy)   N        Y        Y(Buggy)   NIE7              Y(Buggy)   N        Y        Y(Buggy)   NIE8              Y          N        Y        Y(Buggy)   YIE9              Y          Y        Y        Y(Buggy)   YIE10             Y          Y        Y        Y          YFF3.0            Y          Y        Y        Y          N    IE=Internet ExplorerFF3.5/FF3.6      Y          Y        Y        Y          Y    FF=Mozilla FirefoxFF4b1            Y          Y        Y        Y          Y    GC=Google ChromeGC4/GC5          Y          Y        Y        Y          Y    Y=YES,N=NOSafari4/Safari5  Y          Y        Y        Y          YOpera10.10/Opera10.53/      Y          Y        Y        Y(Buggy)   YOpera10.60Opera 12         Y          Y        Y        Y          Y

Useful links

1. To see the support of these methods with all the bugs including more details click here
2. Difference Between Static collections and Live collections click Here
3. Difference Between NodeList and HTMLCollection click Here

//creates a listener for when you press a keywindow.onkeyup = keyup;//creates a global Javascript variablevar inputTextValue;function keyup(e) {  //setting your input text to the global Javascript Variable for every key press  inputTextValue = e.target.value;  //listens for you to press the ENTER key, at which point your web address will change to the one you have input in the search box  if (e.keyCode == 13) {    window.location = "http://www.myurl.com/search/" + inputTextValue;  }}

See this functioning in codepen.

I would create a variable to store the input like this:

var input = document.getElementById("input_id").value;

And then I would just use the variable to add the input value to the string.

= "Your string" + input;