This is an article for discussing on how to get value of input type field in JQuery. The article is written specifically to describe on the title. After all, JQuery itself being a Javascript library can retrieve any values inserted in any types of input type HTML element. So, the following is the snippet code of HTML web page file declaring the necesssary definition for a text input type HTML with a submit button HTML element :
<html> <head> <title>Simple JQuery</title> </head> <body> <input type="text" id="input_text"></input> <input type="submit" id="submit_button"></input> </body> </html>
In the above HTML snippet code, the most important thing is the definition of a text input type HTML element with the id of ‘input_text’. It is defining the id of an element from where the inserted text value will be extracted. Another important part is the submit type button HTML element with the id of ‘submit_button’. Without having to add another attribute such as ‘onClick’ and fill it with a value of the name of method which is going to be called for processing further by retrieving the value from an input type text HTML element, it is more like simplifying the one which is done by using Javascript. JQuery will detect a click event on the submit button HTML element and then retrieve the value from text input type HTML element.
So, in order to retrieve value from a text input type HTML element, below is a snippet code in JQuery which is needed to be inserted in the ‘<head></head>’ section :
<script src="js/jquery-3.2.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#submit_button").click(function(){
var input_text = $("#input_text").val();
alert(input_text);
});
});
</script>
In the above JQuery snippet code, there is a definition on importing JQuery javascript library file so that JQuery scripting code can be processed, interpreted and rendered accordingly. Below is the snippet code for importing JQuery javascript library file :
<script src="js/jquery-3.2.1.min.js"> </script>
After importing the JQuery javascript library file, the next snippet code in JQuery is detecting the click event done on a submit type button HTML element with the id of ‘submit_button’. When the event is triggered, just get the value from a text input type HTML element with the id of ‘input_text’ through the execution of method val() on that element itself.
In the context of this article, overall the HTML web page file content is shown below :
<html>
<head>
<title>Simple JQuery</title>
<script src="js/jquery-3.2.1.min.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$("#submit_button").click(function(){
var input_text = $("#input_text").val();
alert(input_text);
});
});
</script>
</head>
<body>
<input type="text" id="input_text"></input>
<input type="submit" id="submit_button"></input>
</body>
</html>
2 thoughts on “How to get Value of Input Type Field in JQuery”