My drop down(populated with an objectDataSource):

<asp:DropDownList runat=server ID="ddlUserTypes" DataSourceID="odsUserTypes" AppendDataBoundItems=true DataTextField="UserType" DataValueField="Usertype">
<asp:ListItem Value="">-Please select one-</asp:ListItem>
</asp:DropDownList>

Javascript function getting the selected value of the dropdown:

<script type="text/javascript" language="javascript">
    var notRegistered = false;
    var email = '';
    var userType = document.getElementById("ddlUserTypes");
    var pow = userType.options[userType.selectedIndex].value;
    function PreRegister() {debugger;
        if (notRegistered) {
            location.href = '/Register.aspx?pageid=<%= ConfigHelper.RegistrationPageId %>&Email=' + encodeURIComponent(email)+'&asd='+encodeURIComponent(pow);
            return false;
        }
        return true;
    }
</script>

But this is not working pow just keeps on returning undefined? This may be because user type doesnt seem to get anything assigned to it as it stays as null? Does anybody know why this code is not working?

My drop down(populated with an objectDataSource):

<asp:DropDownList runat=server ID="ddlUserTypes" DataSourceID="odsUserTypes" AppendDataBoundItems=true DataTextField="UserType" DataValueField="Usertype">
<asp:ListItem Value="">-Please select one-</asp:ListItem>
</asp:DropDownList>

Javascript function getting the selected value of the dropdown:

<script type="text/javascript" language="javascript">
    var notRegistered = false;
    var email = '';
    var userType = document.getElementById("ddlUserTypes");
    var pow = userType.options[userType.selectedIndex].value;
    function PreRegister() {debugger;
        if (notRegistered) {
            location.href = '/Register.aspx?pageid=<%= ConfigHelper.RegistrationPageId %>&Email=' + encodeURIComponent(email)+'&asd='+encodeURIComponent(pow);
            return false;
        }
        return true;
    }
</script>

But this is not working pow just keeps on returning undefined? This may be because user type doesnt seem to get anything assigned to it as it stays as null? Does anybody know why this code is not working?

• c#
• javascript

• ddlUserTypes isn't the clientId. – gdoron Commented Jul 19, 2013 at 11:42
• What do you mean? Im a javascript newbie – Srb1313711 Commented Jul 19, 2013 at 11:43
• Read my answer below. – gdoron Commented Jul 19, 2013 at 11:44
• I tried what you suggested but 'userType' was still null and 'pow' still undefined – Srb1313711 Commented Jul 19, 2013 at 11:49

4 Answers 4

As gdoron mentioned, ASP.Net will make the HTML id of your dropdown something other than what you set as the ID parameter to your <asp:DropDownList>, which is why your JS isn't finding it.

What may be easiest is to assign a class to your dropdown, and then in your JS, target the element by class.

Use this I hope it's working.

var e = document.getElementById("ddlUserTypes");
var strUser = e.options[e.selectedIndex].value;

var userType = documentgetElemebyById('<%= ddlUserTypes.ClientID %>');

You should read this

<asp:DropDownList CssClass="ddlClass" ...>

It will be transformed like

<select class="ddlClass" ...>
    <option value="value1">value1</option>
    <option selected="selected" value="value2">value2</option>
    ...
</select>

// use jQuery
var selected = $('.ddlClass').val();

// withour jQuery 
// method1
var selected1 = document.querySelector('.ddlClass option[selected="selected"]').value;
// method2
var selected2 = document.querySelector('.ddlClass option:checked').value;