How do i get the value of an input field in javascript?

❮ Input Text Object

Example

Change the value of a text field:

document.getElementById("myText").value = "Johnny Bravo";

Try it Yourself »

Definition and Usage

The value property sets or returns the value of the value attribute of a text field.

The value property contains the default value OR the value a user types in (or a value set by a script).

Browser Support

Syntax

Return the value property:

Set the value property:

Property Values

Technical Details

More Examples

Example

Get the value of a text field:

var x = document.getElementById("myText").value;

Try it Yourself »

Example

Form validation:

var at = document.getElementById("email").value.indexOf("@");
var age = document.getElementById("age").value;
var fname = document.getElementById("fname").value;
submitOK = "true";

if (fname.length > 10) {
  alert("The name may have no more than 10 characters");
  submitOK = "false";
}

if (isNaN(age) || age < 1 || age > 100) {
  alert("The age must be a number between 1 and 100");
  submitOK = "false";
}

if (at == -1) {
  alert("Not a valid e-mail!");
  submitOK = "false";
}

if (submitOK == "false") {
  return false;
}

Try it Yourself »

Example

Dropdown list in a form:

var mylist = document.getElementById("myList");
document.getElementById("favorite").value = mylist.options[mylist.selectedIndex].text;

Try it Yourself »

Example

Another dropdown list:

var no = document.getElementById("no");
var option = no.options[no.selectedIndex].text;
var txt = document.getElementById("result").value;
txt = txt + option;
document.getElementById("result").value = txt;

Try it Yourself »

Example

An example that shows the difference between the defaultValue and value property:

var x = document.getElementById("myText");
var defaultVal = x.defaultValue;
var currentVal = x.value;

Try it Yourself »

Related Pages

HTML reference: HTML <input> value attribute

❮ Input Text Object

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

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

How can I get the value entered in the input field?

What is the value of an input field?

Can we get element by value in JavaScript?

How do you take input in JavaScript?