[RESOLVED] Need an event other than onChange

[jrough]

I have 2 related drop down lists populated by AJAX. The problem is the 2nd one needs to be automatic after the first one is populated. AS it is right now the 2nd one sticks. The 2nd one doesn't have to be selected it just has to be displayed to the user after the first list populates. AS it stands now it shows the old list from the last search until you change the top one then it drops down with the right list but the user doesn't know what happened. It is held up because I'm using onChange to call it. So I just need to have it automatically drop down when the first one drops down at the same time. Right now there are two onChange() events called in both of the input tags. I just need the second one to drop down right after the first one does. I need some ideas, thanks.
function fillZoneNm() {
var bu = document.forms[0].search_bu.value;

            if ( window.XMLHttpRequest ) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
	}else{ // code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
            xmlhttp.onreadystatechange=function() {
	    document.getElementById("search_zonenm").innerHTML=xmlhttp.responseText;
	}
            xmlhttp.open("GET","get_bus.php?bu="+bu,true);
	//xmlhttp.open("GET","get_bus.php?bu=" + bu,true);
	xmlhttp.send();

}

function fillZoneId() {
var bu = document.forms[0].search_bu.value;
alert(bu);
var zonenm = document.forms[0].search_zonenm.value;
alert(zonenm)
if ( window.XMLHttpRequest ) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
document.getElementById("search_zoneid").innerHTML=xmlhttp.responseText;
}
xmlhttp.open("GET","get_zonenms.php?bu="+bu+"&zonenm="+zonenm,true);
xmlhttp.send();

    }

[Krik]

First why run 2 onchange events make it 1 onchange event and have a function run the 2 functions.

Next there are other events you can use; onselect, onfocus, onblur, onclick, onmousedown, onmouseup, onmouseover, onmouseout. Check out w3school.com DOM Event Objects

It probably is best to just have javascript run a second function once the first one has completed.

[jrough]

Thanks I tried the onSelect event in the 2nd drown but it didn't work at all whereas the on chage had the delay but it worked. I like your idea about a function to call two functions. I tried this puting it in the first input tags line:
function fillBoth(){
fillZoneNm();
fillZoneId();
}
It called the first function but the second didn't get called at the same time. After I placed with that 2nd select box at some point I think I got the whole list but not the related list but I'm not sure. I don't know if it needs a parameter passed. It seems like it should work though because the function calls the php page that pulls the SQL and that is dynamic maybe there needs to be a slight delay or something?

[jrough]

I was wrong, doing it as one function the 2nd function doesn't seem to get called at all.

[jrough]

Sorry, I was wrong again. It does call the second function it is just not dynamic. It is the whole list. I will have to figure out how to make it dynamic. Thanks for your idea. Maybe it is even working, it is hard to tell because the data is confusing.🙂🙂