Get Value Of Input JavaScript

In this article we will show you the solution of get value of input javascript, in javascript, we can use two approaches to get value. The first approach we use is document.getElementById().

value method and the second approach we use the jquery selector(“$”) with val () method.

Like, if the user creates the input field to enter some text when entering some text and clicking the button it automatically gets the text value in the console that means if the user enters “talkerscode” in the input field then after clicking the button “talkerscode” print in the console.

Step By Step Guide On Get Value Of Input Javascript :-

1. Using document.getElementById().value() method

<html>
<head>
    <title> Talkerscode</title>
</head>
    <body>
      <input type="txt" id="txt">
      <button type="btn" onclick="get()">Click me to get value</button>
    <script>
     function get(){
       var a=document.getElementById("txt").value
       console.log(a);
    }
    </script>
    </body>
    </html>

First we write html code block. Within the body tag, we assign an input field with the id “txt”.
After that we use the button tag and use the onclick event and call the get() function that will be called when the user clicks on the button.
Within the script tag, we create a function named get.
Within this function, we can use the document.getElementById.value() method to get the value of txt.
Use console.log() to give the value of “txt”.

2. Using jquery Selector with val() method

<html>
  <head>
    <title>Talkerscode</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <label for="name">Name:</label>
    <input type="txt1" id="txt1">
   <label for="city">City:</label>
    <input type="txt2" id="txt2">
    <button id="btn"> Click me to get value</button>
    <script>
      $(document).ready(function(){
        $("#btn").click(function(){
          var a= $("#txt1").val();
          var b= $("#txt2").val();
          console.log(a);
          console.log(b);
      });
      });
    </script>
  </body>
</html>

First we write an HTML code block, then we can use script src to use jquery libraries from CDN(content delivery network).
Within the body tag, we can use a label tag to name the input field. We assign the name of the input field as “Name”.
We create an input field “txt1” with id “txt1”.
We create another label to name the input field. We assign the name of the input field as “City”.
We create an input field “txt2” with id “txt2”.
We can use a button element with id “btn”.<button> tag creates a button in a web page that is clickable and displays the text in the button “Click me to get value”.
Within <script> tag we can use jquery shorthand to execute the code when the document is ready.
We can use click() method to handle the click event in button. When a user clicks on the button the following function is executed.
After that we create a variable named a and assign “$(#txt1”).val” to retrieve the value of the input file with id “txt1” using the val() method.
After that we create a variable named b and assign “$(#txt2”).val” to retrieve the value of input filed with id “txt2” using the val() method.
After that we use console.log() to give the value of “txt1” and “txt2”.

Conclusion :-

In conclusion, we successfully learned two methods to get the value in javascript.

We used document.getElementById().value method and jquery selector(“$”) with val() method.

Both methods give the output same. You can choose any one of the methods that suit you.

I hope this article on get value of input javascript helps you and the steps and method mentioned above are easy to follow and implement.