How To Get Value Of Textbox In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this tutorial we will show you the solution of how to get value of textbox in JavaScript, mainly as we know that there are many input types in JavaScript and in next some tutorials we will show you how to get values from other input types like checkboxes, radio buttons, numbers, emails and many others.
Now, let us learn about how to get textbox value in JavaScript.
Step By Step Guide On How To Get Value Of Textbox In JavaScript :-
As, here below first we are going to create a form with the help of html and after that we will create a button. On the click of button we get the value of textbox with the help of JavaScript.
And we will also show you the value by printing it. Now, let us understand this with the help of codes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>home page</title>
</head>
<body>
Enter your Name here: <input type="text" id="myName" value="Robert">
<button onclick="myFunction()">Click to show</button>
<p id="showHere"></p>
<script>
function myFunction() {
var y = document.getElementById("myName").value;
document.getElementById("showHere").innerHTML = y;
}
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Now, here we create an input field with a label. You can create this input field with form and also without form. It’s your own choice.
- Here, after some text, the input type used is text and we give an id to this input field. Also, we give a value to this to show some text inside text field when we loads our webpage.
- Now, after this we create a button and on click of button, we call our function. Now, our next job is to create an empty div, paragraph, heading anything. In which we want to show the text of text field.
- Now, let us discuss our script. Inside script we create a function with name myFunction and now, inside this function we store the text field in some variable.
- In our case its y. to pick value we generally use basic query of JavaScript and pick up name with the help of ID given to text field.
- And one thing more we have to show of get the value of text field. So, we pick up its value by using value at last.
- Now, the next task is if you want to show the value inserted in our variable. Without this all is ok. It is just to show that value is actually feeded in our text field.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last in conclusion, here we want to say that with the help of this article we are able to get value of textbox with the help of JavaScript.
I hope this tutorial on how to get value of textbox in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
