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?

Firmament

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. – Inenarrable

Actually I have fixed them, just as you did. I don't know why the op has rollbacked ? – Paving

unfortunately when i thougth of clicking edit i have click rollback. thay y i think it was rollback. – Firmament

Answer 1

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.

Francophile

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. – Firmament

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

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

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

Answer 2

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!

Paving

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

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. – Paving

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

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

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

Answer 3

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...
}

Inenarrable

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

Answer 4

If you don't want to use

    document.getElementById()

try it:

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

Thumbtack