How to show and hide controls in content page using javascript?

I have a code mention below. My task is to hide ddlstSchemaNames and lblSchema on page load and when i select value from ddlstAllCISTables i have to show ddlstSchemaNames and lblSchema using javascript? how to do this?

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <table cellpadding="3" width="100%">
        <tr>
            <td class="style1" align="center">
                <asp:Label ID="lblTableNames" runat="server" Text="Select Source Table"></asp:Label>
            </td>
            <td align="left">
                <asp:DropDownList name="ddlstAllCISTables" ID="ddlstAllCISTables" runat="server"
                    Height="25px" Width="220px" OnSelectedIndexChanged="ddlstAllCISTablesChanged">
                </asp:DropDownList>
            </td>
            <td>
            </td>
            <td></td>
        </tr>
        <tr>
            <td class="style1" align="center">
                <asp:Label ID="lblSchema" runat="server" Text="Select Target Schema"></asp:Label>
            </td>
            <td align="left">
                <asp:DropDownList ID="ddlstSchemaNames" runat="server" Height="25px" Width="200px"
                    OnSelectedIndexChanged="ddlstSchemaNamesChanged" onchange="ShowButton();">
                    <asp:ListItem Text="-- Select Schema --" Value="-- Select Target Schema --"></asp:ListItem>
                    <asp:ListItem Text="bdsp" Value="bdsp"></asp:ListItem>
                    <asp:ListItem Text="oltpdev" Value="oltpdev"></asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <asp:Button ID="btnCompare" runat="server" Text="Compare" Visible="false" ToolTip="Click to compare two tables"
                    OnClick="btnCompare_Click" />
            </td>
        </tr>

Re: How to show and hide controls in content page using javascript?

Are you using jQuery in your application??

If so, I can provide you with jQuery code.

Re: How to show and hide controls in content page using javascript?

Thanks

please provide in jQuery

Re: How to show and hide controls in content page using javascript?

var ddlId= '<%=ddlstAllCISTables.ClientID%>';

$('#' + ddlId).change(function(){

$('#trddls').show('slow');

});

</script>

you have to assign ID to <tr> containing dropdownlists.. like

<tr id="trddls" style="display:none;">
            <td class="style1" align="center">
                <asp:Label ID="lblSchema" runat="server" Text="Select Target Schema"></asp:Label>
            </td>
            <td align="left">
                <asp:DropDownList ID="ddlstSchemaNames" runat="server" Height="25px" Width="200px"
                    OnSelectedIndexChanged="ddlstSchemaNamesChanged" onchange="ShowButton();">
                    <asp:ListItem Text="-- Select Schema --" Value="-- Select Target Schema --"></asp:ListItem>
                    <asp:ListItem Text="bdsp" Value="bdsp"></asp:ListItem>
                    <asp:ListItem Text="oltpdev" Value="oltpdev"></asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>

Re: How to show and hide controls in content page using javascript?

Now i want to show <tr id="trddls" style="display:none;"> when user select an item from the first dropdownlist. How?

Thanks

Re: How to show and hide controls in content page using javascript?

I gave you jQuery code

var ddlId= '<%=ddlstAllCISTables.ClientID%>';

$('#' + ddlId).change(function(){

$('#trddls').show('slow');

});

Re: How to show and hide controls in content page using javascript?

when i select value from ddlstAllCISTables it is now showing dropdownlist i.e ddlstSchemaNames. When i select value from ddlstAllCISTables it should show the other controls. how?

Re: How to show and hide controls in content page using javascript?

Which Other Controls??

Re: How to show and hide controls in content page using javascript?

sorry

read this reply

when i select value from ddlstAllCISTables it is not showing dropdownlist i.e ddlstSchemaNames. When i select value from ddlstAllCISTables it should show the other controls i.e ddlstSchemaNames and label ( i.e tr) . how?

Re: How to show and hide controls in content page using javascript?

Did you use jQuery code??

it should work as expected.

can you post full .aspx Code?

Re: How to show and hide controls in content page using javascript?

here is my full code

<script src='<%=ResolveClientUrl("~/Scripts/jquery-1.4.1.min.js")%>' type="text/javascript"></script> // In master page

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
    var ddlId = '<%=ddlstAllCISTables.ClientID%>';
    $('#' + ddlId).change(function () {
        $('#trddls').show('slow');
    });
</script>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <table cellpadding="3" width="100%">
        <tr>
            <td class="style1" align="center">
                <asp:Label ID="lblTableNames" runat="server" Text="Select Source Table"></asp:Label>
            </td>
            <td align="left">
                <asp:DropDownList name="ddlstAllCISTables" ID="ddlstAllCISTables" runat="server"
                    Height="25px" Width="220px">
                </asp:DropDownList>
            </td>
            <td>
            </td>
            <td></td>
        </tr>
        <tr id="trddls" style="display:none;">
            <td class="style1" align="center">
                <asp:Label ID="lblSchema" runat="server" Text="Select Target Schema"></asp:Label>
            </td>
            <td align="left">
                <asp:DropDownList ID="ddlstSchemaNames" runat="server" Height="25px" Width="200px"
                    OnSelectedIndexChanged="ddlstSchemaNamesChanged">
                    <asp:ListItem Text="-- Select Schema --" Value="-- Select Target Schema --"></asp:ListItem>
                    <asp:ListItem Text="bdsp" Value="bdsp"></asp:ListItem>
                    <asp:ListItem Text="oltpdev" Value="oltpdev"></asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>

Re: How to show and hide controls in content page using javascript?

try this

<script type="text/javascript">
$(document).ready(function(){
    var ddlId = '<%=ddlstAllCISTables.ClientID%>';
    $('#' + ddlId).change(function () {
        $('#trddls').show('slow');
    });
});
</script>

Re: How to show and hide controls in content page using javascript?

Still not working. please any other way,

Thanks

Re: How to show and hide controls in content page using javascript?

Hi,

athar_techsavvy

please any other way,

You can add a onchange event using javascript in codebehind.

protected void Page_Load(object sender, EventArgs e)
        {
            ddlstAllCISTables.Attributes.Add("onchange", "javascript:document.getElementById('trddls').style.display = 'inline';");
        }

Re: How to show and hide controls in content page using javascript?

i tried your code

ddlstAllCISTables.Attributes.Add("onchange", "javascript:document.getElementById('trddls').style.display = 'inline';");
        }

still not working. Anyhow i got the working code like this.

<script type="text/javascript" src="<%=ResolveClientUrl("~/js/jquery-1.6.1.js")%>"></script>

<script type="text/javascript">
        $(document).ready(function() {
            var ddlId = '<%=ddList.ClientID%>';
            $('#' + ddlId).change(function() {
                if ($('#<%=ddList.ClientID%>').val() == "2") {
                    //$('#<%=dd2.ClientID %>').empty().append('<option selected="selected" value="0">Please select</option>');
                    $('#<%=dd2.ClientID %>').hide();
                }
                else {
                    $('#<%=dd2.ClientID %>').show();
                }
            });
        }); 
    </script>

<div id="trddls">
        <asp:DropDownList ID="ddList" runat="server">
            <asp:ListItem Value="1" Text="Show"></asp:ListItem>
            <asp:ListItem Value="2" Text="Hide"></asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />
        <br />
        <asp:DropDownList ID="dd2" runat="server">
        </asp:DropDownList>
    </div>