Set Text property of asp label in Javascript PROPER way

Question

I have a series of textboxes on a form   When the user inserts numbers into these textboxes  calculations are made and  lt asp Label gt  controls are updated via JavaScript to reflect these calculations   document getElementById   lt   TotalLoans ClientID   gt    innerHTML   TotalLoans    This correctly updates the UI  However  when I try to access the value in the codebehind  the Text property is empty  This makes sense I guess  since I was updating the innerHTML property via the JavaScript     TotalLoans Text will always be equal to    in this scenario double bTotalLoans   string IsNullOrEmpty TotalLoans Text                        0 00                       Convert ToDouble TotalLoans Text     How do I update the Text property of the  lt asp Label gt  via JavaScript in such a way that I can read the property in the codebehind   Update  This is a small problem on a large form that contains 41 labels  each of which displays the results of some calculation for the user   Taking the advice of FishBasketGordo I converted my  lt asp Label gt  to a disabled  lt asp TextBox gt    I m setting the value of the new textbox as such       document getElementById   lt   TotalLoans ClientID   gt    value   TotalLoans    Again  in the codebehind  the value of TotalLoans Text is always equal to       I don t mind changing how I approach this  but here s the crux of the matter   I am using JavaScript to manipulate the property values of some controls   I need to be able to access these manipulated values from the code behind when  Submit  is clicked     Any advice how I can go about this   Update 2  Regarding the answer by  James Johnson  I am not able to retrieve the value using  innerText property as suggested   I have EnableViewState set to true on the  lt asp Label gt    Is there something else I am missing   I don t understand why  when I type in a textbox and submit the form  I can access the value in the codebehind  but when I programmatically change the text of a textbox or label by way of JavaScript  I cannot access the new value

User · Accepted Answer

Place HiddenField Control in your Form    lt asp HiddenField ID  hidden  runat  server    gt    Create a Property in the Form  protected String LabelProperty       get               return hidden Value            set               hidden Value   value            Update the Hidden Field value from JavaScript   lt script gt     function UpdateControl                 document getElementById   lt   hidden ClientID   gt    value    12         lt  script gt    Now you can access the Property directly across the Postback  The Label Control updated value will be Lost across PostBack in case it is being used directly in code behind

User · Answer

Since you have updated your label client side  you ll need a post-back in order for you re server side code to reflect the changes   If you do not know how to do this  here is how I ve gone about it in the past   Create a hidden field    lt input type  hidden  name    EVENTTARGET  id    EVENTTARGET  value      gt    Create a button that has both client side and server side functions attached to it   You re client side function will populate your hidden field  and the server side will read it   Be sure you re client side is being called first    lt asp Button ID   Submit  runat  server  Text  Submit Button  OnClientClick  TestSubmit     OnClick   Submit Click    gt    Javascript Client Side Function   function TestSubmit                   try                 var message    Message to Pass                document getElementById    EVENTTARGET   value   message                catch  err                  alert err message                           C  Server Side Function  protected void  Submit Click object sender  EventArgs e            Hidden Value after postback      string hiddenVal  Request Form    EVENTTARGET        Hope this helps

User · Answer

Use the following code   lt span id  sptext  runat  server  gt  lt  span gt    Java Script  document getElementById   lt   sptext   gt   innerHTML  change text     C   sptext innerHTML

User · Answer

This one Works for me with asp label control    function changeEmaillbl                if  document getElementById   lt   rbAgency ClientID  gt    checked   true                 document getElementById   lt   lblUsername ClientID  gt    innerHTML    Accredited No

User · Answer

Instead of using a Label use a text input    lt script type  text javascript  gt      onChange   function ctrl            var txt   document getElementById   lt    txtResult ClientID   gt             if  txt               txt value   ctrl value                              lt  script gt    lt asp TextBox ID  txtTest  runat  server  onchange  onChange this      gt          lt  -- pseudo label that will survive postback -- gt     lt input type  text  id  txtResult  runat  server  readonly  readonly  tabindex  -1000  style  border 0px background-color transparent     gt            lt asp Button ID  btnTest  runat  server  Text  Test    gt

User · Answer

Asp net codebehind runs on server first and then page is rendered to client  browser   Codebehind has no access to client side  javascript  html  because it lives on server only   So  either use ajax and sent value of label to code behind  You can use PageMethods   or simply post the page to server where codebehind lives  so codebehind can know the updated value

User · Answer

The label s information is stored in the ViewState input on postback  keep in mind the server knows nothing of the page outside of the form values posted back  which includes your label s text    you would have to somehow update that on the client side to know what changed in that label  which I m guessing would not be worth your time   I m not entirely sure what problem you re trying to solve here  but this might give you a few ideas of how to go about it   You could create a hidden field to go along with your label  and anytime you update your label  you d update that value as well   then in the code behind set the Text property of the label to be what was in that hidden field

[javascript] Set Text property of asp:label in Javascript PROPER way

Place HiddenField Control in your Form.

Create a Property in the Form

Update the Hidden Field value from JavaScript

Examples related to javascript

Examples related to asp.net

Examples related to label

Examples related to code-behind