There are various methods to get input textbox value:
Method 1:
document.getElementById('textbox_id').value
to get the value of desired boxEg.
document.getElementById("searchTxt").value;
Note : Method 2,3,4 and 6 returns a collection of elements called NodeList, so use [whole_number] to get the desired occurence, for first element use [0] and for second one use 1 and so on...
Method 2:
Use
document.getElementsByClassName('class_name')[whole_number].value
which returns a Live NodelistEg.
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 nodelistEg.
document.getElementsByTagName("input")[0].value;
,if this is the first textbox in your page.
Method 4:
document.getElementsByName('name')[whole_number].value
Eg.
document.getElementsByName("searchTxt")[0].value;
if this is the first textbox with name 'searchtext' in your page.
Method 5:
Use powerful
document.querySelector('selector').value
which uses CSS selector to select elementEg.
document.querySelector('#searchTxt').value;
selected by iddocument.querySelector('.searchField').value;
selected by classdocument.querySelector('input').value;
selected by tagnamedocument.querySelector('[name="searchTxt"]').value;
selected by name
Method 6:
document.querySelectorAll('selector')[whole_number].value
which also uses CSS selector to select elements but it returns all elements with that selector as a static nodelist.Eg.
document.querySelectorAll('#searchTxt')[0].value;
selected by iddocument.querySelectorAll('.searchField')[0].value;
selected by classdocument.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
FF3.0 Y Y Y Y N IE=Internet Explorer
FF3.5/FF3.6 Y Y Y Y Y FF=Mozilla Firefox
FF4b1 Y Y Y Y Y GC=Google Chrome
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