Friday, March 2, 2012

Visible,Show,Hidden,Hide Controls using JavaScript ASP.NET

when we want to use this functionality we have to find control id in Javascript

step 1    for find control id --------

var e = document.getElementById('rw1');

step 2 then we use control_id.style property for this-------

for visibility of control

e.removeAttribute("style");

we can use e.style.display='block'; in place of  e.removeAttribute("style");
but can disturb structure of page.
so we should use e.removeAttribute("style"); 

for hide  control

g.style.display='none';



 Example:-
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
     <script language="javascript" type="text/javascript">
   
     function toggle_v(me) {
      var e = document.getElementById('rw1');
      var f = document.getElementById('rw2');
      var g = document.getElementById('rw3');
      if(me.value=='4K')
      {
      e.removeAttribute("style");//e.style.display='block';
      f.style.display='none';
      g.style.display='none';
      }
      else if (me.value=='4J')
      {
      e.removeAttribute("style");
      f.removeAttribute("style");
      g.style.display='none';
      }
      else if(me.value=='4M')
      {
      e.style.display='none';
      f.style.display='none';
      g.removeAttribute("style");
      }
      else
      {
      e.style.display='none';
      f.style.display='none';
      g.style.display='none';
      }
       
   }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    <b>PG Officer Action </b>
                </td>
                <td >
                    <asp:DropDownList ID="select" runat="server" onchange="toggle_v(this);">
                        <asp:ListItem Text="-- PLEASE SELECT --" Value="XX" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Aditya Pratap Singh" Value="4K"></asp:ListItem>
                        <asp:ListItem Text="Akhilesh Gupta" Value="4J"></asp:ListItem>
                        <asp:ListItem Text="Abhishek Kumar Rai" Value="4M"></asp:ListItem>
                     </asp:DropDownList>
                </td>
            </tr>
          
            <tr id="rw1" style="display: none">
                <td>
                    <b>Address </b>
                </td>
                <td>
                    <asp:TextBox ID="TxtLetterContNTS" runat="server" BorderStyle="Solid" BorderWidth="1px"
                      TextMode="MultiLine" height="200px" Width="350px"   ></asp:TextBox>
                </td>
            </tr>
            <tr id="rw2" style="display: none">
                <td>
                    <b>Do you want to send Address ? </b>
                </td>
                <td style="margin-left: 20px;">
                    <asp:RadioButtonList ID="rdb" runat="server" RepeatDirection="Horizontal">
                        <asp:ListItem Selected="True" Text="Yes" Value="Y"></asp:ListItem>
                        <asp:ListItem Text="No" Value="N"></asp:ListItem>
                    </asp:RadioButtonList>
                </td>
            </tr>
            <tr id="rw3" style="display: none">
                <td>
                    <b>Remarks </b>
                </td>
                <td style="margin-left: 20px;">
                    <asp:TextBox ID="txtremarks" runat="server" BorderStyle="Solid" BorderWidth="1px"
                      TextMode="MultiLine" height="200px" Width="350px"></asp:TextBox>
                </td>
            </tr>
         
        </table>
    </div>
    </form>
</body>
</html>
Posted by at
Labels: , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)