In this article I will explain with an example, how to display (copy) TextBox value to Label using
jQuery in ASP.Net.
HTML Markup
The HTML Markup consists of following controls:
TextBox – For capturing Name.
Button – For copying TextBox value to Label.
Label – For displaying TextBox value.
<asp:TextBox ID="txtName" runat="server" />
<asp:Button ID="btnCopy" runat="server" Text="Copy To Label" />
<hr />
<asp:Label ID="lblName" runat="server"></asp:Label>
Displaying (Copying) TextBox value to 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
Copy To Label 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.
<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*=btnCopy]").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
