CODEWITHSUNDEEP
c#javascriptasp.netajax
Santosh Sahu
Santosh Sahu

Reputation: 219

Facing difficulty with javascript getelementbyid

If some one have any suggestion or other way kindly help. I have

when I'll click to lnk_NameEdit button txtUserName will visible and lblusername buttons must unvisible and the text in lable will display in TextBox

<td width="237" class="value_td" style="border: 0; border-top: 1px solid #afc0f3;">
      <asp:Label ID="lblusername" runat="server" Text="Santosh"></asp:Label>
      <asp:TextBox ID="txtUserName" runat="server" Width="300" Visible = "false">    
      </asp:TextBox>
</td>


<td width="64" class="epotions_td" style="border: 0; border-top: 1px solid #afc0f3;">
   <span>
        <asp:LinkButton ID="lnk_NameEdit" runat="server" CommandName="Edit" OnClientClick = 'ControlVisible();'>Edit</asp:LinkButton>
   </span>|
</td>

<script language="javascript" type="text/javascript">
     function ControlVisible() {

         var lbl = document.getElementById("<%= lblusername.ClientID %>");
         var txt = document.getElementById("<%= txtUserName.ClientID %>");        

         lbl.visible = false;         
         txt.visible = true;
     }
</script>


<td width="237" class="value_td" style="border: 0; border-top: 1px solid #afc0f3;">
      <asp:Label ID="lblusername" runat="server" Text="Santosh"></asp:Label>
      <asp:TextBox ID="txtUserName" runat="server" Width="300" Visible = "false">    
      </asp:TextBox>
</td>

and I have 1 LinkButton

<td width="64" class="epotions_td" style="border: 0; border-top: 1px solid #afc0f3;">
   <span>
        <asp:LinkButton ID="lnk_NameEdit" runat="server" CommandName="Edit" OnClientClick = 'ControlVisible();'>Edit</asp:LinkButton>
   </span>|
</td>

when I'll click to lnk_NameEdit button txtUserName will visible and lblusername buttons must unvisible and the text in lable will display in TextBox

  <script language="javascript" type="text/javascript">
 function ControlVisible() {

     var lbl = document.getElementById("<%= lblusername.ClientID %>");
     var txt = document.getElementById("<%= txtUserName.ClientID %>");        

     lbl.visible = false;         
     txt.visible = true;
 }

Upvotes: 1

Views: 1094

Answers (4)

Shadow Wizzard
Shadow Wizzard

Reputation: 66398

Your Textbox with ID txtUserName has Visible = "false" which means it's not being sent to the browser - thus you get client side error.

Change this to:

<asp:TextBox ID="txtUserName" runat="server" Width="300" style="display: none;">

Which will still make it invisible by default, then change the lines to:

lbl.style.display = "none";
txt.style.display = "";

Upvotes: 0

Irvin Dominin
Irvin Dominin

Reputation: 30993

There is a big difference between server executed code and client side code. In the moment you have a mix.

You can set the visibility of an element in client side (javascript) setting the display property http://www.w3schools.com/jsref/prop_style_display.asp

Take a look at this tutorial: http://www.javascriptkit.com/javatutors/dom3.shtml

You can change this piece og code from this:

lbl.visible = false;         
txt.visible = true;

to this:

lbl.style.display= "none";         
txt.style.display= "block";

If you are working with server side code (e.g Load event, asp. net button click, etc) you can use the visible property of your object.

Sample fiddle: http://jsfiddle.net/WzTSR/

Upvotes: 0

dku.rajkumar
dku.rajkumar

Reputation: 18588

try this,

lbl.style.visibility="visible";         
txt.style.visibility="hidden";

Upvotes: 1

Adam Rackis
Adam Rackis

Reputation: 83376

Assuming the rest of the code is correct, lbl and txt will be dom elements. Dom elements do not have visible properties, but you can hide them by setting their styles' display properties:

lbl.style.display = "none";

EDIT

Make sure you run this code after your dom is ready. That you were getting null from document.getElementById probably means that you were running this script right in your head section. As a result, your dom had not yet been parsed, and your label and textbox didn't exist yet.

The easiest way to fix this is to put the script section at the very end of your body. Another way would be to call ControlVisible from your body's onload: <body onload="ControlVisible()">

Upvotes: 0

Related Questions