current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 97 down vote favorite
36

I am working on kinda a search with Javascript, I would use a form but it messes up something else on my page...any ways I have this input text field...

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

and this is my javascript

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

My question is how do I get the value from the text field into javascript?

share|improve this question

5 Answers 5

up vote 276 down vote accepted

There are various methods to get input textbox value:

Method 1:

document.getElementById('textbox_id').value to get the value of desired box

Eg. 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 Nodelist

Eg. 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 nodelist

Eg. 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 element

Eg. 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 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 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
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

Useful links

  1. To see the support of these methods with all the bugs including more details click here
  2. Difference Between Static and Live nodelist click Here
share|improve this answer
    
IE8 supports QSA as far as I can see, it just doesn't support CSS3 selectors in the selector string. –  Fabrício Matté Jun 22 '13 at 4:02
    
@FabrícioMatté i just checked here quirksmode.org/dom/tests/basics.html#querySelectorAll and it told me that it doesnot –  Ankit Jun 22 '13 at 4:10
    
Interesting. Simple test in IE8 for Win7 shows that querySelector is supported jsfiddle.net/syNvz/show and QSA too jsfiddle.net/syNvz/2/show –  Fabrício Matté Jun 22 '13 at 4:13
    
When i run your fiddle it shows red background,let me check if i am running it on compatibility view –  Ankit Jun 22 '13 at 4:15
    
Well dunno then, I've tested on a clean copy of Win7 with IE8. –  Fabrício Matté Jun 22 '13 at 4:16
up vote 1 down vote

You should be able to type:

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

<script>
    var input = document.getElementById("searchTxt");

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

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 JS to make/improve/edit.

share|improve this answer
up vote 0 down vote

Try this one

<input type="text" onKeyUP="trackChange(this.value)" id="myInput">
<script>
function trackChange(value)
{

window.open("http://www.google.co.in/search?output=search&q="+value)

}
</script>
share|improve this answer
up vote 0 down vote

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.

share|improve this answer
up vote -1 down vote

easy way is to use getElementById('id') or getElementsByTagName('element name')[0]

share|improve this answer
3  
nothing like getElementByName –  Sachin Verma Sep 16 '13 at 9:48
1  
And this returns the element, not the value! –  user3095977 May 4 at 13:11

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.