How to get selected value from dropdownlist in asp.net using Javascript?

Question

I am populating country dropdownlist from a database. I need to select a value from dropdown list and assign it to textbox by using Javascript.

Code:

var textboxId = document.getElementById("txtCountry");
var dropdownListId =document.getElementById("ddlLocation"); 

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

document.getElementById(textboxId).value = strUser;    
document.getElementById(textboxId).focus();

by doing this I am getting error. Any solutions?

I just edited your code indentations, you had them round the wrong way. If you want it to show up in a code block then indent the line by four (or more) spaces. — slugster
– slugster, Commented Mar 9, 2010 at 12:56
Actually I have fixed them, just as you did. I don't know why the op has rollbacked ? — anthares
– anthares, Commented Mar 9, 2010 at 12:59
unfortunately when i thougth of clicking edit i have click rollback. thay y i think it was rollback. — kumar
– kumar, Commented Mar 9, 2010 at 14:31

Buhake Sindi · Accepted Answer · 2010-03-09 12:21:01Z

12

Your code is wrong, Look at where I've made the changes to the same code:

var textboxId = document.getElementById("txtCountry");
var e = document.getElementById("ddlLocation"); 
var strUser = e.options[e.selectedIndex].value;
textboxId.value = strUser;    
textboxId.focus();

What you did, is you selected your textbox and JS returned you a DOM element of that text box and you wanted to populate it by passing the DOM of the textBox inside the getElementById() function.

Here is where it broke:

document.getElementById(textboxId).value = strUser;

To use getElementById() method, you pass a string value of the id of an element.

Hope this helps.

answered Mar 9, 2010 at 12:21

Buhake Sindi

89.5k30 gold badges176 silver badges234 bronze badges

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

4 Comments

kumar Over a year ago

Hi Elite, i have binding the dropdown list from db and assign as datatextfield ="countryname" datavaluefield="id" above case it is retrive the id. but i need to get text. if i changed datavaluefield then it is working.

Buhake Sindi Over a year ago

Sorry slugster, I didn't check your answer! :-) Great minds thinks alike.

Buhake Sindi Over a year ago

@Kumar, I don't get it, is it working or is there something that I need to look at?

kumar Over a year ago

yeah i have changed the little bit of code now it is fine. thanx a lot

anthares · Accepted Answer · 2010-03-09 12:08:59Z

4

Try with:

document.getElementById('<%=txtCountry.ClientID%>').value

or

var textBox = document.getElementById('<%=txtCountry.ClientID%>');
textBox.value = strUser;

That's because the ids of the html elements in the generated documents doesn't match with the id that you have assigned in your code. To get the id assigned to your control in the html, you can use the ClientID property of your dropdown.

Another problem is that you assign yourhtml element to variable and then use getElementById function which is not valid call.

This is changed in ASP.NET 4, that is about to be released.

Hope that helps!

edited Mar 9, 2010 at 12:08

answered Mar 9, 2010 at 12:01

anthares

11.2k4 gold badges43 silver badges62 bronze badges

5 Comments

kumar Over a year ago

i am getting error : document.getElementbyID(..) is null or not an object if i used above statement.

anthares Over a year ago

may be you have mistyped the id. It should be the ID in your ascx/aspx file of the dropdown control. example: <asp:dropdown id="txtCountry" ...> If you post your asp.net code will be helpful.

kumar Over a year ago

<asp:TextBox ID="txtCountry" runat="server"><asp:TextBox> <asp:DropDownList ID="ddlLocation" runat="server" width:255px"></asp:DropDownList>

kumar Over a year ago

dropdown is getting populated from db. when i select any location i want to bind it to textbox.

anthares Over a year ago

then you should be able to take the value in the dropdown with document.getElementById('<%=ddlLocation.ClientID%>').value

slugster · Accepted Answer · 2010-03-09 12:18:14Z

1

These two lines:

document.getElementById(textboxId).value = strUser;    
document.getElementById(textboxId).focus();

are wrong too. If your previous line actually worked:

var textboxId = document.getElementById("txtCountry");

then what you have called textboxId will actually be the textbox control, so you will be doing a getElementById using the control instead of a string identifier.

To follow upon what @anthares said; try this:

var textboxId = '<%=txtCountry.ClientID%>';
alert('My textbox id is: '  + textboxId);

and make sure that you are getting the correct ID for the textbox (remember that it will be munged by ASP.Net, at least make sure you are not getting nothing). Then when you do a document.getElementById you need to check the result before using:

var myTextBox = document.getElementById(textboxId);
if (myTextBox !== null) {
    ...now i can access the properties...
}

edited Mar 9, 2010 at 12:18

answered Mar 9, 2010 at 12:11

slugster

50k14 gold badges105 silver badges150 bronze badges

1 Comment

slugster Over a year ago

Then refer to the first part of my answer about the two lines that are wrong.

JustSomeGuyInWorld · Accepted Answer · 2021-04-09 12:13:07Z

0

If you don't want to use

    document.getElementById()

try it:

    var VarName = $('#<%=YouDropDownId.ClientId %>').val();

answered Apr 9, 2021 at 12:13

JustSomeGuyInWorld

751 gold badge1 silver badge6 bronze badges

Collectives™ on Stack Overflow

How to get selected value from dropdownlist in asp.net using Javascript?

4 Answers 4

4 Comments

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related