JQuery Set Value of Textbox or Label Control In Asp.net

JQuery Set Value of Textbox or Label Control In Asp.net

Jquery Set Value of textbox or Label control in Asp.net. This is first tutorial on Jquery and here we will see how to set value of label from text entered in Text Box.

We are using Jquery hosted on Google CDN.

Below script gets value from textbox and set it to label control

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

 <script type="text/javascript" language="javascript">
    
 
 $(document).ready( function (){ 
 
     $("#<%=Button1.ClientID%>").click( function(e){
       
       e.preventDefault();

        var textBoxValue =   $("#<%=TextBox1.ClientID%>").val();
 
         $("#<%=Label1.ClientID%>").text( textBoxValue  );
 
      });
                     
  });
 
 </script>

Description

$(document).ready function of Jquery ensures that all controls are loaded in page.

$("#<%=Button1.ClientID%>") Finds control by client ID.

$("#<%=Button1.ClientID%>").click we are attaching the click event to the control. The function written inside the click event performs required operation.

e.preventDefault(); Prevents default behavior of click event.

$("#<%=TextBox1.ClientID%>").val(); Gets textbox control and val() is used to return the value of textbox control.

$("#<%=Label1.ClientID%>").text( textBoxValue  ); Finds the html element and assigns a value.

Asp.net aspx Html Code.

<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
            <br />
            
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            
            <asp:Button ID="Button1" runat="server" Text="Submit" />
        </div>
    </form>
</body>

Tags:

JQuery access label control and set valueGridview select emailJquery Set Value Of Textbox.Jquery Dropdown Selected ValueAsp.net access html control textbox element value at code behindJQuery Hidden Field Set ValueJQuery TextBox Value()Asp.net JQuery Calendar ControlAsp.net Create Html ControlsJquery Gridview Dropdownlist Selected Change Enable Disable ControlsGridView Edit

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.