In this article I will explain with an example, how to display TextBox value in Label using jQuery.
When the Button is clicked, the TextBox value is retrieved and displayed in the Label using jQuery.
HTML Markup
The following HTML Markup consists of an HTML TextBox, a Button and a SPAN element.
Name: <input type="text" id="txtName" />
<input type="button" id="btnShow" value="Show Name" />
<hr/>
<span id="lblName"></span>
Displaying (Showing) TextBox value in Label using jQuery
Inside the jQuery document ready event handler, the Show Name Button has been assigned a jQuery Click event handler.
When the Show Button is clicked, the TextBox value is retrieved and is displayed in Label (HTML SPAN) element.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnShow").click(function () {
var name = $("#txtName").val();
$("#lblName").html(name);
});
});
</script>
Screenshot
![Display (Show) TextBox value in Label using Query]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
