How do I get the value of text input field using JavaScript?

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?

Text Copied From stackoverflow.com
on : Thu, Jul 19, 2012 Views : 1401583

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

  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
Text Copied From stackoverflow.com
on : Thu, Jul 19, 2012

Ask Question

If you want to ask question you must LogIn or SignUp
Login SignUp

Quick Links

E-Magazines

@

Total Followers
Study Group Created
Study Group Joined
Following Teacher
Following Organization
Blog Articles Added
Questions Asked
Questions Answered
Jobs Posted
Total Members in Group
Questions asked by members
Tasks added in this Group

Please wait..

Ok

Login to Open ESchool OR Create your account    Login   SignUp