Update 'Enable' of 'asp:DropDownList' in JavaScript

Question

I have 2 DropDownLists, and I am trying to switch the second one to Enable=true, When in the first DropDownList I have choose option number 2.

When I run the code on VS, I receive this error: "JavaScript runtime error: Unable to set property 'setAttribute' of undefined or null reference"

<script language="javascript">
    function Test(ddlId) {

        var ControlName = document.getElementById(ddlId.id);
        if (ControlName.value == 2) {
            alert("good");
            document.getElementById("ddlActivitiesParams2").setAttribute("Enable", true);
            //document.getElementById("ddlActivitiesParams2").disabled = true;
        }
    }
</script>

<asp:TemplateColumn HeaderText="Param1">
    <HeaderStyle Width="25%"></HeaderStyle>
    <ItemStyle HorizontalAlign="Center" Width="25%"></ItemStyle>
    <ItemTemplate>
        <asp:Label ID="lblParam1Desc" runat="server" Text='' Width="90%" />
    </ItemTemplate>
    <FooterTemplate>
        <asp:DropDownList ID="ddlAgentParams" onchange="Test(this);" DataValueField="Value" DataTextField="Text" DataSource=' <%# GetThresholdsAgentTypeParams() %> ' runat="server" Width="90%">
        </asp:DropDownList>
    </FooterTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Param2">
    <HeaderStyle Width="25%"></HeaderStyle>
    <ItemStyle HorizontalAlign="Center" Width="25%"></ItemStyle>
    <ItemTemplate>
        <asp:Label ID="lblParam2Desc" runat="server" Text='aaa' Width="90%" />
    </ItemTemplate>
    <FooterTemplate>
        <asp:DropDownList ID="ddlActivitiesParams2" Enabled="false" Visible="true" DataValueField="Value" DataTextField="Text" DataSource=' <%# GetActivities() %> ' runat="server" Width="90%">
        </asp:DropDownList>
    </FooterTemplate>
</asp:TemplateColumn>

The attribute 'Enable' does not exists at runtime, only in the design. That is why JavaScript gives an error. Just look at the HTML source and you will see that it is not present. — VDWWD
– VDWWD, Commented Aug 1, 2016 at 9:42
Something like this: document.getElementById("<%=DropDownList1.ClientID %>").disabled = true;. You have to get the ID generated for the element you want to disable into javascript. — VDWWD
– VDWWD, Commented Aug 1, 2016 at 10:25
You mean: "<%=ddlActivitiesParams2.ClientID %>" ? Because if yes, I have an error. — David
– David, Commented Aug 1, 2016 at 10:48
Compiler Error Message: CS0103: The name 'ddlActivitiesParams2' does not exist in the current context — David
– David, Commented Aug 1, 2016 at 11:22

Tyler Roper · Accepted Answer · 2016-08-01 13:35:46Z

2

You're looking for the wrong ID. ASP.Net client-side ID'S will change at runtime. You can't use a server side block in your selector because the control you're trying to access is within another control.

Being that your ddl is in a footer template, I'm assuming there is only one of them. If this is true and youre using a version of ASP.Net that supports it, you can put the attribute ClientIDMode="static" on the ddl, and the ID will not change at runtime.

Otherwise, you may just want to add a unique cssclass to the drop down and select it based on class instead of ID.

answered Aug 1, 2016 at 13:35

Tyler Roper

21.7k6 gold badges35 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Benny · Accepted Answer · 2016-08-01 12:05:14Z

0

It is often the case that containers change the id of controls in the rendering process. Do a view source on the returned HTML and check what is the id of the created select element

answered Aug 1, 2016 at 12:05

Benny

537 bronze badges

Collectives™ on Stack Overflow

Update 'Enable' of 'asp:DropDownList' in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related