Get Input Value JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of get input value JavaScript, input value here means the values of input fields. For example, we have to apply validation on username, email, password or age, etc.
Then this is possible only if we apply validation and get the values of input fields to check whether they are valid or not.
So, how to get the values of input fields in our today’s main question? So, let us see the example given below to see how to get input field values with the help of JavaScript.
Step By Step Guide On Get Input Value JavaScript :-
Here, to get the value of the input field, three main ways are most commonly used. That is:
- By using getelementbyid
- By using getelementbyclassname
- By using queryselector
Now, the above are the three main ways to help we can understand how to get input values using JavaScript.
In this tutorial, we are going to understand only the first one which is getelementbyid whereas the rest will be discussed in our next sessions because understanding all concept in one tutorial make the tutorial lengthy to read.
So, using the codes below we will understand first how to use getelementbyid and then understand this with help of steps later.
<html>
<head>
<title>
JavaScript Tutorials
</title>
</head>
<body>
<h1>
TalkersCode – JavaScript Tutorials
</h1>
<h2>
Get input value in JavaScript
</h2>
<form id="form" method="post" name="form">
<label for="username">Enter your Name: </label>
<input type="text" id="username" >
<input type="submit" value="Submit" onclick="getinputval()"
>
</form>
<script>
const getinputval = () =>{
let inputVal = document.getElementById("username").value;
alert(" hello "+inputVal+" welcome to TalkersCode");;
}
</script>
</body>
</html>- Here, above we show you an example in JavaScript.
- First, we here create a basic structure of HTML. For this, we use HTML, head, title, and body with a script tag. We hope you know about the basic structure of HTML and which HTML tag is used for which concept.
- Now, when we look inside the body tag. Here, we see some headings tags and a script tag. Heading tag again is a concept of HTML, whereas script relates to JavaScript.
- JavaScript is written always inside the script tag. Where the script is a paired tag so it also has a closing tag. Now inside these script tags, we write our JavaScript code.
- Here, as we know that in this tutorial we are going to understand how to get input values using JavaScript. So, to get the value of input we create a form with one input field and one button to submit that form. Now, when we click on the button our JavaScript function will be called which gets the input value.
- To get the input value inside JavaScript, we create a function that gets called on a button click. Inside this function, we use getelementbyid in document.getelementbyid() to select the input by id, and then we use .value to get the value of that field.
- At last, we just alert the value to show that the value will be taken using JavaScript. We hope you understand the above codes with help of these steps easily.
Conclusion :-
At last, in conclusion, here we can say that with this article’s help we can understand how to get input value with help of JavaScript.
I hope this tutorial on get input value JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
