How to display TextBox value in Label using Javascript in ASP.Net

 

Introduction: Hello All!! In this article I will explain with an example, how to display (show) TextBox value in Label using Javascript in ASP.Net.

Implementation  

There will be two controls on the HTML Page:

1.    TextBox - For typing Name.

 

2.    Button - For showing or displaying the value of name that you will be type in the TextBox

Here I will assign the OnClientClick event handler to the Button.

Label - For capturing the value of Textbox and Showing the value on webpage.

Code for HTML Page  

Name:<asp:TextBox ID="txt_name" runat="server" />

<asp:Button ID="btn_show" runat="server" Text="Show Name" OnClientClick="return Show_value()" />

<hr />

<asp:Label ID="lbl_name" runat="server"></asp:Label>

 

Displaying or Showing the value of TextBox in Label using JavaScript in ASP.Net

When you will click on the Show Name Button, the Show_value Javascript  function will be  called.

Inside this function, first the TextBox and Label controls are referenced and the TextBox value will be set in the Label control and it will  returned  as FALSE.

<script type="text/javascript">

    function Show_value() {

        // TextBox for typing the name in the webpage at the time of execution.

        var txt_name = document.getElementById("<%=txt_name.ClientID%>");

 

        // Label for showing the value of name in the webpage at the time of execution.

        var lbl_name = document.getElementById("<%=lbl_name.ClientID%>");

 

        //showing the value  of TextBox in the Label.

        Lbl_name.innerHTML = txt_name.value;

 

        return false;

    }

</script>

 

Conclusion: In above code, I have been explained that how to display (show) TextBox value in Label using Javascript in ASP.Net. This code is very helpful for every developer. All the Best and take care of you Developers. We will come back soon with the another article.

 

Regards

Using Asp.net