Issue
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?
Solution
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 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 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 iddocument.querySelectorAll('.searchField')[0].value;selected by classdocument.querySelectorAll('input')[0].value;selected by tagnamedocument.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 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 | |||||
| Opera 12 | Y | Y | Y | Y | Y |
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
Answered By - bugwheels94 Answer Checked By - David Marino (PHPFixing Volunteer)
Posts
