In this tutorial we will learn how to Get value of input text type element with jQuery. For this we can use jQuery val() method which will return the value of input text box element.
Table of Contents
jQuery val() method
jQuery val() method sets or returns the value of all HTML input elements.
In this example val() method is used to get value of input text element.
HTML Code
HTML Code is given below, in this code we have a input text type tag and a button tag.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Get value/text of input Element</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<input type="text" id='input'>
<button id="btn">Click Me!</button>
<script src="script.js"></script>
</body>
</html>
JQuery Code
JQuery Code is given below, jQuery click() method is used to execute a function on click of a button.
Inside this function val() method will return the value of input tag.
$('#btn') is an id selector used to target the button tag.
Text or Value of input element is displayed with alert() method.
<script>
$(document).ready(function(){
$('#btn').click(function(){
var value = $('#input').val();
alert(value);
});
});
</script>
Demo
Video Tutorial
Watch video tutorial on How To Get value of input tag using jQuery.