In this article I will explain with an example, how to display (show) TextBox value in Label using
jQuery in ASP.Net.
HTML Markup
The HTML Markup consists of following controls:
TextBox – For capturing Name.
Button – For showing TextBox value in Label.
Label – For capturing TextBox value and showing to user.
Name:<asp:TextBox ID="txtName" runat="server" />
<asp:Button ID="btnShowName" runat="server" Text="Show Name" />
<hr />
<asp:Label ID="lblName" runat="server"></asp:Label>
Displaying (Showing) TextBox value in Label using jQuery in ASP.Net
Inside the HTML Markup, the following script file is inherited:
1. jquery.min.js
Inside the
jQuery document ready event handler, the
Show Name Button has been assigned with a
jQuery click event handler.
When the Button is clicked, first the TextBox and Label controls are referenced and the TextBox value is set to the Label control and the FALSE is returned.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=btnShowName]").click(function () {
//Reference the TextBox.
var txtName = $("[id*=txtName]");
//Reference the Label.
var lblName = $("[id*=lblName]");
//Copy the TextBox value to Label.
lblName.html(txtName.val());
return false;
});
});
</script>
Screenshot
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
