Javascript dropdownlist.selectedIndex causing error in ASP.net page

Question

I'm trying to simply enable/disable a button based on whether a value has been selected from a dropdownlist, and for some reason javascript isn't getting the selected index of the dropdownlist. Here's the declaration of the drop down list:

<asp:DropDownList ID="ddlMyDropDownList" runat="server">
    <asp:ListItem> </asp:ListItem>
    <asp:ListItem>Yes</asp:ListItem>
    <asp:ListItem>No</asp:ListItem>
</asp:DropDownList>

In the code behind I'm adding the onChange attribute:

ddlMyDropDownList.Attributes.Add("onchange", "enableButton();")

And this is what the enableButton function looks like, stripped down to the part that is causing problems:

function enableButton() {
    var ddl = document.getElementById('#<%= ddlMyDropDownList.ClientID %>');
    alert("Testing");
    var idx = ddl.selectedIndex;
};

As written the alert fires whenever I change the value of the drop down list. If I move the alert to after the idx line, however:

function enableButton() {
    var ddl = document.getElementById('#<%= ddlMyDropDownList.ClientID %>');
    var idx = ddl.selectedIndex;
    alert("Testing");
};

it doesn't fire, indicating that the ddl.selectedIndex is causing an error somehow. Why might this be occurring and how do I remedy it? Assuming I want to test only if the user has selected anything other than the first option, is there a better/easier way to do so?

Are you sure you are getting a reference to the control in ddl? If var ddl is null or undefined, the alert will still fire. Perhaps you could step into the code from a breakpoint there, or try examining a different property. — DOK
– DOK, Commented Feb 1, 2012 at 14:18

Dan Iveson · Accepted Answer · 2012-02-01 14:27:43Z

2

If you alert(ddl) you will probably find that ddl is null because there is no element with an id of #<%= ddlMyDropDownList.ClientID %>. Try removing the # from the beginning of the id string.

edited Feb 1, 2012 at 14:27

answered Feb 1, 2012 at 14:19

Dan Iveson

9366 silver badges10 bronze badges

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

2 Comments

Jamie Dixon Over a year ago

Nice spot on the hash. Rather than returning null i suspect it'll return undefined.

Venture Free Over a year ago

Actually alert(ddl) showed "null", at least in FireFox. Thanks for the catch. Those are exactly the kinds of errors that I overlook too easily.

Tim Schmelter · Accepted Answer · 2012-02-01 14:25:22Z

0

Throw it out of your JS-function:

<script type="text/javascript">
  var ddlMyDropDownList = '<%= ddlMyDropDownList.ClientID %>';

  function enableButton() {
    var ddl = document.getElementById(ddlMyDropDownList);
  }
</script>

Or - better when possible - pass the reference directly:

ddlMyDropDownList.Attributes.Add("onchange", "enableButton(this);")

Then you don't need to find the element:

function enableButton(ddl) {
    var idx = ddl.selectedIndex;  
}

edited Feb 1, 2012 at 14:25

answered Feb 1, 2012 at 14:19

Tim Schmelter

462k79 gold badges720 silver badges981 bronze badges

Collectives™ on Stack Overflow

Javascript dropdownlist.selectedIndex causing error in ASP.net page

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related