Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to get the input value of the first matched element using jQuery?
To get the input value of the first matched element using jQuery, use the .first() method combined with the .val() method. The .first() method selects the first element from a set of matched elements, while .val() retrieves the current value of form elements.
Syntax
The basic syntax to get the input value of the first matched element is ?
$(selector).first().val()
Example
You can try to run the following code to get the input value of the first matched element using jQuery ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#getValueBtn").click(function(){
var firstInputValue = $("input").first().val();
$("#result").text("First input value: " + firstInputValue);
});
});
</script>
</head>
<body>
<h3>Multiple Input Fields:</h3>
<input type="text" value="First Input" />
<br><br>
<input type="text" value="Second Input" />
<br><br>
<input type="text" value="Third Input" />
<br><br>
<button id="getValueBtn">Get First Input Value</button>
<br><br>
<div id="result"></div>
</body>
</html>
The output of the above code is ?
First input value: First Input
Alternative Method
You can also use the :first selector to achieve the same result ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#getValue").click(function(){
var value = $("input:first").val();
alert("Value: " + value);
});
});
</script>
</head>
<body>
<input type="text" value="Hello World" />
<input type="text" value="jQuery Tutorial" />
<br><br>
<button id="getValue">Get First Value</button>
</body>
</html>
Conclusion
The .first().val() method combination is an efficient way to retrieve the value of the first matched input element when multiple elements exist on the page.
Updated on: 2026-03-13T18:08:25+05:30
1K+ Views
Advertisements