How to Get Form Input Field Value In jQuery Easily
By Saruque Ahamed MollickHello developer, Here you gonna learn how to get form input field value in jQuery very easily.
I will show you how to fetch the input field value with the help of jQuery and thereafter, you can easily show it on the same page with live preview.
You can store the input field value in a jQuery variable as well as you can use that wherever you want.
Learn How To Get Selected Option from HTML Form Dropdown in jQuery
So as this is a basic tutorial, I will show you how to get the value from an HTML input field, how to store it in a variable and then how to show the value in any div area or custom area.
Also Read,
How To Count The Number Of Characters Without Spaces in jQuery
Calculate the distance between mouse and element in jQuery
Get form input field value in jQuery and store it in a variable
So let’s just create an HTML form to explain it
<!DOCTYPE html>
<html>
<head>
<title>Your Title Here</title>
</head>
<body>
<h1>My Form</h1>
<form id="thisform" method="post">
Enter Your Name
<br>
<input type="text" name="myname">
</form>
</body>
</html>Now the next step is to create a jQuery function and a div area to show the value we gonna get from the HTML form field.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#thisform input[name=myname]').keyup(function(){
var entered_name=$(this).val();
$('#showhere').text(entered_name);
});
});
</script>Your jQuery function is now created. Now what you need is just a simple div area to show how it is working. (You can use console log too to check the output of your script. )
<div id="showhere"></div>
Add this div area where you want to show your output.
You may read,
Alert Before Leaving A Web Page Using JavaScript jQuery
Real Time Chat Application PHP With File Transfer System AJAX
The full code will look like this,
<!DOCTYPE html>
<html>
<head>
<title>Your Title Here</title>
</head>
<body>
<h1>My Form</h1>
<form id="thisform" method="post">
Enter Your Name
<br>
<input type="text" name="myname">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#thisform input[name=myname]').keyup(function(){
var entered_name=$(this).val();
$('#showhere').text(entered_name);
});
});
</script>
<div id="showhere"></div>
</body>
</html>Test it on your browser.
Free Currency Converter PHP using Fixer io API
Special Note:
Moreover,
console.log('enterted_name');You can use this to show your output in the browser’s console log.
Finally, If any query arises just put that in the comment section.
Leave a Reply