In this tutorial I shall show you how to get value of textbox in javascript from html.
Step 1 – Create a basic html document with basic code
First of all let’s create a blank basic html document with basic code.
In the above screenshot you will see a basic html document with basic code. Now let’s create a textbox in this document.
Step 2 – Add textbox in html document
In the above screenshot you will see I have added an input of type text. Now let’s create a button in the document. We need a button because when a user types in input text we need the value of input which user enters in that input field.
So when a user clicks on that button our value will go into javascript. So let’s create a button.
Step 3 – Add a button in our document
In the above screenshot on line #07 you will see I have created a button with text of “Get input text” and also added an attribute “onclick” and given the value “getInputTextAction()”. The value in the “onclick” attribute is actually a javascript function. That will be called when the user clicks on the button.
Now let’s render this in our web browser to see how it is looking.
In the above screenshot you will see how nicely they both are positioned.
Now let’s create that function in javascript to get input text value.
Step 4 – Write javascript code to get input text value
In the above screenshot you will see from line #9 to #14 I have written javascript code. And created the function “getInputTextAction”.
In this function I have got the input field by using the “querySelector” method and got input text by its name attribute that is “textInput”.
On line #12 I have added the “textInput” variable in the “console.log” method. So that I could see in the web browser console whether we got our input text tag or not? So that we could get input text value in our javascript code.
Now let’s render this in our web browser to see the console of our result. The console tab is in every web browser’s developer tools. It depends on you which web browser you are using. I am using google chrome. The short key to open developer tools is “CTRL+SHIF+i”.
In the above screenshot you will see the red highlighted text. This is why when we click on the “Get input text” button. We see that input text element in the console. That means our code is working fine. Now let’s get the value from the textbox which the user will enter.
Step 3 – Get the value of textbox that user enters
In the above screenshot you will see I have created a new variable “inputValue” and assigned the “textInput” value to our variable.
In the linke #13 I have logged the “inputValue” variable. So that we could see the value that we shall get in our javascript code and can manipulate or utilize that value wherever we want to use that.
Let’s render it in our web browser and see if we get the value or not.
In the above screenshot you will see I have entered the value “input value entered” in the input field.
When I pressed the “Get input text” button. In our console tab of web browser developer tools. I got the value of my textbox.
Congratulations! Now you have the textbox value in your javascript code. Now you can utilize this value where you want.
You may also like: