Question

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:

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

And this is my JavaScript code:

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

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

Answer 1

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

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