Home » Asp.netRSS

asp dropdown - onchange="javascript: select_country(this.options[this.selectedIndex].text);"

With a regular form drop-down box I can use the onchange event to fire off some javascript with out a page refresh or postback to the server. The above code is not working with an asp drop-down control. Is there a way to make this work? 

I have form that hides and shows different textboxes depending on selected values in a dorp-down but it does cause a postback which refreses the screen I want to do this wiithout refreshing the screen and figured Javascript and hide and show divs etc would work.


<script type="text/javascript" language="javascript">
function select_country(selectedcountry)
{
var country = selectedcountry;

if(country == "United States")
{
//do nothing;
}
else
{
// hide state drop-down and the state label.
// code goes here...............
} } </script>




The drop-down:

<asp:DropDownListID="ddCountry"runat="server"onchange="javascript: select_country(this.options[this.selectedIndex].text);">

 

 Of course on change that doesn't work. How can i get that to work like a regular drop-down? Basically I need to hide and show controls based on drop-down values without posting back to the server.


 

7 Answers Found

 

Answer 1

you can wireup that javascript function to your drop down in page_load in the code behind


ddCountry.Attributes.Add("onchange", "select_country(this.options[this.selectedIndex].text);");

 

Answer 2

Hi,

Make sure that you have not set "AutoPostback" property in markup for dropdown. 

 

Answer 3

Okay I did that but for some reason nothing happens when I use the drop-down box. 

Here is what the code looks like if i view source on the page..


select name="ddCountry" id="ddCountry" onchange="select_country(this.options[this.selectedIndex].text);">








<script type="text/javascript" language="javascript">
function select_country(selectedcountry)
{
var country = selectedcountry;

if(country == "United States")
document.form1.action="unitedStates.aspx";
else
document.form1.action="Hide.aspx";

}
</script>


 

It looks like it should be working but changing the drop-down values does nothing. I put in

document.form1.action="unitedStates.aspx" and the other one just to see if it is doing anything and nothing happens. What could be the problem?


 

 

Answer 4

If you add an alert inside the function, does it fire?

It should probably be

document.getElementById("form1").action="unitedStates.aspx";

Eric

 

Answer 5

I manage to get all the code working for an onchange.. Now I just can't get a javascript function to fire when the page is loaded. It seems to fire before the controls are rendered. I did post ot another older thread that has a simular issue. Here is what i said.





Okay this thread started a while ago but as I am searching for answers on how to run a javascript function AFTER THE PAGE HAS LOADED and not found anything that works yet I am posting here.


I have these lines in a function called init() in the page between the head tags:
var iaspcontrol = document.getElementById(txtEducationOther);
var iasplabel = document.getElementById(LabelEducationOther);

This is an ASP.NET page in C#. In the code behind I am using this line to run the init() function supposedly after the page is loaded.
ClientScript.RegisterStartupScript(this.Page.GetType(), "", "window.onload=init;", true);

I have also tried placing the code at the bottom of the page after the </body> tag:
<script type="text/javascript">
window.onload=init;
</script>

No matter how i do this i get the error below which is telling me that the textbox doesn't exist yet.


ERROR:
Message: 'txtEducationOther' is undefined
Line: 49
Char: 1
Code: 0
URI: http://mike-pc/NurseScienceCourse/registration.aspx


How can i get this to run after all the controls are redered already so I do not get this error?


 

Answer 6

belcherman:
Message: 'txtEducationOther' is undefined
 

It is saying the variable is not defined, it has nothing to do with the element. Where are you storing the value?

Eric

 

Answer 7

I abandoned the running a function on load. What I did was to initially HIDE the textboxes and lables on load instead of in an initializing function. then in code I added the onchange and if certain fields are selected then the label and texbox are shown or hidden. I figured otu how to run a javascript function on page load but apparently the asp.net controls aren't available at the time thus it cannot find it and an error is the result. Here is the funciton i wrote to hide and show; maybe it will help someone.



<script type="text/javascript" language="javascript">
function ShowHide(selectedvalue, testvalue, aspcontrol, asplabel)
{

var iselectedvalue = selectedvalue;
var itestvalue = testvalue;
var iaspcontrol = document.getElementById(aspcontrol);
var iasplabel = document.getElementById(asplabel);



if(iselectedvalue == testvalue){
iaspcontrol.style.display = "block";
iasplabel.style.display = "block";
}
else {
iaspcontrol.style.display = "none";
iasplabel.style.display = "none";
}

}
</script>

 
 
 

<< Previous      Next >>


Microsoft   |   Windows   |   Visual Studio   |   Follow us on Twitter