The purpose of this article is to demonstrate how we can get the value of textbox using jQuery. A basic understanding of HTML, CSS, and jQuery is required. This can be done by using the jQuery val() method.
val() Method: This method is used to set or return the value of the attribute for the selected elements.
Syntax: Method to get the value of the textbox
$().val()
Approach:
- Create a file index.html in your local system.
- Create an input filed (type text) inside your HTML body.
- To get the value of the input text you need to attach val() method to that particular selected input element.
Example: In this example, we are going to see the use of the input val() method. We take an input filed (type text) and attach an input event listener to it. When the user types any letter or word in the text box it will immediately show the text at the bottom of the input field.
HTML
<!DOCTYPE html> <html>
<head>
<script src=
</script>
<script type="text/javascript">
$(document).ready(function () {
$('.textbox').on('input', function () {
// Set the inner text of the
// of the span tag
$('span').text($('.textbox').val());
});
});
</script>
<style>
.container {
display: flex;
justify-content: center;
}
h1 {
color: green;
}
span {
margin-top: 10px;
}
</style>
</head>
<body>
<h1 class="container">
GeeksforGeeks
</h1>
<div class="container">
<input class="textbox" type="text" placeholder="Text" />
</div>
<span class="container"></span>
</body>
</html>
|
Output:
Article Tags :
Recommended Articles