Anjan Dutta

How to get the value of text input field using JavaScript

In javascript, we can get the value of a text input field by accessing the input field using its id in javascript.

First, we need to define the input element inside containing form tags like below.

<form id="myForm" name="myform" onsubmit="return false;">
      <label for="u_name">Enter your name</label>
      <input type="text" id="u_name_id"  name="u_name"/>
      <button name="button" onclick="getValue()">Get Value</button>
</form>

Then, in our javascript code, we can access the input field's value like this.

var nameValue = document.getElementById("u_name_id").value

Here is the complete example.

HTML Code

<html>
  <head>
    <title>Accessing form value</title>
  </head>
  <body>
    <form id="myForm" name="myform" onsubmit="return false;">
      <label for="u_name">Enter your name</label>
      <input type="text" id="u_name_id"  name="u_name"/>
      <button name="button" onclick="getValue()">Get Value</button>
    </form>
    <div id="display">
    </div>
  </body>
</html>

Javascript Code

function getValue() {
  var nameValue = document.getElementById("u_name_id").value;
  
  /*Displaying the acquired value*/  

  document.getElementById("display").innerHTML = "Hello, " + nameValue;
}