jQuery Textbox Value Examples

jQuery Textbox Value: Have you wondered how to get textbox value using jQuery? In jQuery, textbox value can be easily obtained by using just single line of code. Follow along for more info.

How to Get jQuery Textbox Value Easily

Let’s assume that you have few textboxes in a page, each with their own IDs. So let’s look at how to “get textbox value” using different ways.

Example 1: Get Textbox value using val() when a button is clicked

HTML code to alert textbox value :

<p>
Enter Name and hit the button:
<input type="text" name="name" id="name" />

<input type="submit" name="sbt_1" id="sbt_1" value="Alert Textbox Value">

</p>

jQuery code to Get Textbox value using val()

<script type="text/javascript">

	$('#sbt_1').on("click", function(e){				

		var value = $("#name").val();

		alert(value+ ' This alert is triggered because of button click');

		e.preventDefault();

	});

</script>

When you execute the above code, you will see a textbox and a button. Simply enter some value in it and hit the button. An alert will popup and that will show the textbox value. So that’s how you can easily get textbox value when a button is clicked.

Example 2: Get Textbox value using .change() when textbox value is changed

HTML Source to Get textbox value using change method:

<p>
Enter City: <input type="text" name="city" id="city" />
</p>

jQuery code to Get textbox value using change method:

<script type="text/javascript">

$(document).ready(function() {

	$("#city").change(function(){

		var value = $(this).val();

		alert(value+ ' This alert is triggered because of change event using ID #city');

	});

});

</script>

When you run the above code and enter some value in the City box and then click outside of the box, an alert will show up with the value that you have entered in the textbox. So that’s how you can easily get textbox value using jQuery with the help of the .change() method.

Example 3: Get Textbox value using .change() when textbox value is changed by means of input name attribute

HTML Source to Get textbox value using change method by means of input name attribute:

<p>
Enter Town:
<input type="text" name="town" id="town" />
</p>

jQuery Code to Get textbox value using change method by means of input name attribute:

<script type="text/javascript">

$(document).ready(function() {

	$("input[name='town']").change(function(){

		var value = $(this).val();

		alert(value+ ' This alert is triggered because of change event using ID input[name=\'town\']');

	});

});

</script>

When you run the above above code, it will show you the textbox for entering the Town. Once you enter the Town and click outside of the textbox, the value you have entered will be shown in alert box. So that’s how you can easily get textbox value using change method with the help of the input name attribute.

Example 4: Get Textbox value using .change() when textbox value is changed by means of textbox class

HTML Source to Get textbox value using change method by means of input textbox class

<p>
Enter Province:
<input type="text" name="province" id="province" class="province_class" />
</p>

jQuery Code to Get textbox value using change method by means of input textbox class

<script type="text/javascript">

$(document).ready(function() {

	$(".province_class").change(function(){

		var value = $(this).val();

		alert(value+ ' This alert is triggered because of change in it using .province_class');

	});
});

</script>

When you run the above above code, it will show you the textbox for entering the Province. Once you enter the Province and click outside of the textbox, the value you have entered will be shown in alert box. So that’s how you can easily get textbox value using change method with the help of the input textbox class.

Example 5: Get Textbox value using .blur() method

HTML Source to Get textbox value using blur method

<p>
Enter Zip Code:
<input type="text" name="zip_code" id="zip_code" />
</p>

jQuery Code to Get textbox value using blur method

<script type="text/javascript">

$(document).ready(function() {

	$("#zip_code").blur(function(){

		var value = $(this).val();

		alert(value+ ' This alert is triggered because of blur');

	});

});

</script>

When you run the above above code, it will show you the textbox for entering the Zip Code. Once you enter the Zip Code and click outside of the textbox, the value you have entered will be shown in alert box. So that’s how you can easily get textbox value using blur method.

That’s it for now!

Do you know of any other ways to get textbox value using jQuery? Feel free to share below.