how to get selected value from dropdownlist in asp.net using javascript?

Question

Hi Guys,

i am populating country dropdownlist from 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?

Regards ravi

Answer 1

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!

Answer 2

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

Answer 3

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.