Tuesday, 2 July 2013

show and hide a panel on dropdown item change in Javascript

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

        var DropdownList = document.getElementById('<%= ddl_Category.ClientID %>');
       
        var SelfIndex = DropdownList.selectedIndex;
        var SelfValue = DropdownList.value;
        var SelfText = DropdownList.options[DropdownList.selectedIndex].text;

        if (SelfText == "New")
        {
            document.getElementById('ctl00_ContentBody_pnlnewcategory').style.display = 'block';
        }
        else
        {
            document.getElementById('ctl00_ContentBody_pnlnewcategory').style.display = 'none';
        }
    }
   
    </script>
   
<script type="text/javascript" language="javascript">
    function closeCategory()
    {
        var DropdownList = document.getElementById('<%= ddl_Category.ClientID %>');
        DropdownList.selectedIndex = 0;
        document.getElementById('ctl00_ContentBody_pnlnewcategory').value = '';
        document.getElementById('ctl00_ContentBody_pnlnewcategory').style.display = 'none';
        return false;

    }
</script>

In aspx page

<tr>
<td width="50%">
<asp:DropDownList ID="ddl_Category" runat="server"  onchange="chkValid();" Width="220px">
</asp:DropDownList>
</td>
<td width="50%">
<asp:Panel ID="pnlnewcategory" runat="server" style="display:none">
<font style="font-family:Verdana;font-weight:bold;font-size:11px">New Category</font>
<asp:TextBox ID="txt_NewCategory" runat="server" CssClass="DetailsContent"></asp:TextBox>
<asp:ImageButton ID="imgnewcat" runat="server" ImageUrl="../images/close_Button2.gif" Height="16px" Width="16px" OnClientClick="return closeCategory();" />
</asp:Panel>
</td>
</tr>

In Code behind

  if (dt.Rows.Count > 0)
        {
            ddl_Category.DataValueField = "Category_Id";
            ddl_Category.DataTextField = "Category_Name";
            ddl_Category.DataSource = dt;
            ddl_Category.DataBind();
            ddl_Category.Items.Insert(0, new ListItem("--Please Select--", "0"));
        }
        ddl_Category.Items.Add( new ListItem("New"));

No comments:

Post a Comment