In this article I will explain with an example, how to display (copy) TextBox value to Label using
JavaScript in ASP.Net.
HTML Markup
The HTML Markup consists of following controls:
TextBox – For capturing Name.
Button – For copying TextBox value to Label.
The Button has been assigned with an OnClientClick event handler.
Label – For displaying TextBox value.
<asp:TextBox ID="txtName" runat="server" />
<asp:Button ID="btnCopy" runat="server" Text="Copy To Label" OnClientClick="return CopyToLabel()" />
<hr />
<asp:Label ID="lblName" runat="server"></asp:Label>
Displaying (Copying) TextBox value to Label using JavaScript in ASP.Net
When the
Copy To Label Button is clicked, the
CopyToLabel JavaScript function is called.
Inside this function, 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">
function CopyToLabel() {
//Reference the TextBox.
var txtName = document.getElementById("<%=txtName.ClientID%>");
//Reference the Label.
var lblName = document.getElementById("<%=lblName.ClientID%>");
//Copy the TextBox value to Label.
lblName.innerHTML = txtName.value;
return false;
}
</script>
Screenshot
![Display (Copy) TextBox value to Label using JavaScript in ASP.Net]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
