How do I get the value of text input field using JavaScript?
How do I get the value of text input field using JavaScript?
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?
Accepted Answer
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 boxFor 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 HTMLCollectionFor 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 HTMLCollectionFor 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 NodeListFor 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 elementFor 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 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
Read more... Read less...
//creates a listener for when you press a key
window.onkeyup = keyup;
//creates a global Javascript variable
var 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;
}
}
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;
You should be able to type:
var input = document.getElementById("searchTxt");
function searchURL() {
window.location = "http://www.myurl.com/search/" + input.value;
}
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>
I'm sure there are better ways to do this, but this one seems to work across all browsers, and it requires minimal understanding of JavaScript to make, improve, and edit.
Also you can, call by tags names, like this: form_name.input_name.value;
So you will have the specific value of determined input in a specific form.
Try this one
<input type="text" onkeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value) {
window.open("http://www.google.com/search?output=search&q=" + value)
}
</script>