javascript error: Cannot read property 'options' of null

Question

I have a GridView that has a column with a textbox where the user can enter a value and a column with a dropdownlist. If the user enter a values that is not equal to 1 in the textbox, they must select a value from the dropdownlist. The default value in the DDL is "Select" which is just an empty value that was coded in: ddlReasons.Items.Insert(0, new ListItem("Select"));. The DDL is created dynamically but select will always be the default value.

 function UpdateSerialQtyRcvd(SerNoID, QtyRcvd) {
        if (QtyRcvd != 1) {
            var ddl = document.getElementById("ddlReasons");
            var selectedValue = ddl.options[ddl.selectedIndex].value;
            if (selectedValue == "Select") {
                alert("Must select reason");
            }

        }
        else {
            PageMethods.UpdateSerialQtyRcvdUserControl(SerNoID, QtyRcvd, OnUpdateSuccess, OnUpdateFail);
        }
    }

If the user enters a value that is not 1 then I need to check what value is in the DDL. If "Select" is the value I need the user to select something else in the DDL but I am getting this error on the line var selectedValue = ddl.options[ddl.selectedIndex].value;

Uncaught TypeError: Cannot read property 'options' of null

Code for dropdownlist:

<asp:TemplateField HeaderText="Reason">
 <ItemTemplate>
  <asp:DropDownList ID="ddlReasons" runat="server" class="ReasonDDL" ></asp:DropDownList>
 </ItemTemplate> 
</asp:TemplateField>

Try with jquery to get the selected value from drop down. [jQuery Get Selected Option From Dropdown](http://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown) like `var selectedValue = $('#ddlReasons').find(":selected").text();` or `var selectedValue = $('#ddlReasons :selected').text();` — Braj, Jul 29 '15 at 09:03
`document.getElementById("ddlReasons");` returns null, i.e. your dropdown couldn't be found. Post the relevant HTML. — phuzi, Jul 29 '15 at 09:06
the dropdown should have unique Id, since you are using the dropdown in a GridView, you need to access the dropdown by class Name — sudhansu63, Jul 29 '15 at 09:09
@Braj I added the code you suggested but when checking `if (selectedValue == "Select")` selectedValue is " " — user123456789, Jul 29 '15 at 09:18

score 1 · Accepted Answer · answered Jul 29 '15 at 09:18

1

You'll need to get the ClientId...

Javascript:

var ddl = document.getElementById("<%=ddlReasons.ClientID%>");

JQuery:

var ddl = $('#<%=ddlReasons.ClientID%>');

Check out the MSDN documentation on how to access the Client ID and the different settings.

answered Jul 29 '15 at 09:18

Christian Phillips

18,399
8
53
82

I am getting the error: The name 'ddlReasons' does not exist in the current context – user123456789 Jul 29 '15 at 09:22
@user123456789 Inspect your dropdown and see the id of the dropdown – Nagaraj S Jul 29 '15 at 09:33

score 0 · Answer 2 · answered Aug 30 '16 at 05:34

0

One more way to do it using JQuery :

var ddlReason = $("[id*=ddlReasons]");
var selectedValue = ddlReason.val();

answered Aug 30 '16 at 05:34

Parthipan Natkunam

756
1
11
16

javascript error: Cannot read property 'options' of null

2 Answers2