I'm using a Javascript function to dynamically display and populate a secondary drop-down menu based on the user's selection. It works, but only if there's just one dynamic box on the page because the getElementByID is hard-coded in the script and not passed through (see below). My question is this - how do I take a variable that was passed into the function and pass it OUT of the function, into another one?

relevant HTML code

<select name="student" onchange="showClass(this.value,'lower_classes','lowerclassmen')">
    <option value="0" selected="selected">Please select...</option>
    <option value="1">Freshman</option>
    <option value="2">Sophomore</option>
</select>
<span id="lowerclassmen"></span>

<select name="student" onchange="showClass(this.value,'upper_classes','upperclassmen')">
    <option value="0" selected="selected">Please select...</option>
    <option value="1">Junior</option>
    <option value="2">Senior</option>
</select>
<span id="upperclassmen"></span>

<script language="javascript" type="text/javascript">
var xmlhttp;
function showClass(id,tablename,displayarea) {
    xmlhttp = GetXmlHttpObject();
    if(xmlhttp == null) {
        alert ("Your browser does not support HTTP requests.");
        return;
    }
    var url = "getsublist.php";
    url = url+"?i="+id;
    url = url+"&t="+tablename;
    url = url+"&sid="+Math.random();
    xmlhttp.onreadystatechange = stateChanged();
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
}
function stateChanged() {
    if(xmlhttp.readyState == 4) {
        document.getElementById("lowerclassmen").innerHTML = xmlhttp.responseText;
    }
}
function GetXmlHttpObject() {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    if(window.XMLHttpRequest) {
        return new XMLHttpRequest();
    }
    // code for IE6, IE5
    if(window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    return null;
}
</script>

7/16/2009 3:20:24 PM

what the hell are you even doing

7/16/2009 3:24:55 PM

^

Quote :

"I'm using a Javascript function to dynamically display and populate a secondary drop-down menu based on the user's selection."

Let's say you have 2 options in a drop-down menu:

option1
option2

If you choose option1, the Javascript passes along the variables to a PHP script that runs a database query and dynamically (without a page refresh) displays a second drop-down menu:

option1-1
option1-2
option1-3

If you go back and select option2, it will replace the existing second drop-down menu with one populated by those linked to that option in the database:

option2-1
option2-2
option2-3

I have separate instances of this system on a page. The location of the second drop-down menu is determined by the ID of the span tag. Currently, the ID is hard-coded into the Javascript, which means that changing options in either instance produces only one secondary drop-down (where there should be two). Does that help?

[Edited on July 16, 2009 at 3:34 PM. Reason : clarification]

7/16/2009 3:30:50 PM

I get that, but why? Are they especially long lists of options, or do the options change drastically per session or per user? It just seems like you're making it harder than it ought to be.

7/16/2009 3:33:35 PM

^ The lists are long and change frequently (bi-weekly). Also the database content is used on other parts of the site, so while changing it on one page may not be a big deal, changing it on 5 pages, when the lists are very long, becomes very time-consuming.

Do you have any suggestions? This may not be a good idea - it just seemed to me that this was utilizing a database as it's meant to be used: a single record of content that is used over and over in multiple areas and/or on multiple pages so that when changes are made, the changes are instantaneous and site-wide.

[Edited on July 16, 2009 at 3:37 PM. Reason : .]

7/16/2009 3:35:49 PM

How about making "lowerclassmen" and "upperclassmen" radio buttons, then returning one value if one state is true and another if it's false?

7/16/2009 3:37:41 PM

^ Because that was just a small example. I trimmed it down so that there would only be enough information to get the point across. Also, they're not exclusive (perhaps my example was a poor choice): I want to be able to select items from BOTH drop-down lists, not either/or.

7/16/2009 3:39:32 PM

Okay. Why can't you just use a return statement?

7/16/2009 3:46:41 PM

^ I tried that - I put "return displayarea;" (no quotes, of course) after "xmlhttp.send(null);" in the showClass() function and replaced "lowerclassmen" (quotes included) in the stateChanged() function with "displayarea" (no quotes) and the Firefox Error Console says:

Quote :

"function showClass does not always return a value"

and then references "return displayarea;"

I'm sure I'm just missing something...where should I put it? I also tried using "stateChanged(displayarea)" (no quotes) and that didn't do it, either.

7/16/2009 3:54:39 PM

You'll need to define a default value to return, I guess.

7/16/2009 3:57:25 PM

I don't know what the fuck is going on here

Go to stackoverflow and get an answer

7/16/2009 4:37:24 PM

I'm in a hurry and didn't really have time to read your post but maybe this will help.

Bring xmlhttp inside showClass and pass variables to stateChanged();

xmlHttp.onreadystatechange = function(){stateChanged(xmlHttp);};

function stateChanged(xmlHttp){
if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){

7/16/2009 5:21:32 PM

^ I'll give that a shot, though I'm not quite sure how that will pass the one variable I'm looking to pass. Would that simply pass them all?

7/17/2009 7:33:19 AM

is this what you're asking? (passing displayarea from showClass to stateChanged?)

<script language="javascript" type="text/javascript">
var xmlhttp;
function showClass(id,tablename,displayarea) {
    xmlhttp = GetXmlHttpObject();
    if(xmlhttp == null) {
        alert ("Your browser does not support HTTP requests.");
        return;
    }
    var url = "getsublist.php";
    url = url+"?i="+id;
    url = url+"&t="+tablename;
    url = url+"&sid="+Math.random();
    xmlhttp.onreadystatechange = stateChanged(displayarea);
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
}
function stateChanged(dispArea) {
    if(xmlhttp.readyState == 4) {
        document.getElementById(dispArea).innerHTML = xmlhttp.responseText;
    }
}
function GetXmlHttpObject() {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    if(window.XMLHttpRequest) {
        return new XMLHttpRequest();
    }
    // code for IE6, IE5
    if(window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    return null;
}
</script>

7/17/2009 8:28:29 AM

^ That's what I thought it would be, but nothing happens and I don't get any errors, either. But I figured it out, based partly on roadkill's suggestion - instead of just doing:

xmlhttp.onreadystatechange = stateChanged(displayarea);

it needs to be:

xmlhttp.onreadystatechange = function(){stateChanged(displayarea);};

and it works flawlessly. Thanks for all the suggestions!

7/17/2009 8:35:27 AM

[Edited on July 20, 2009 at 9:31 AM. Reason : Nevermind.]

7/20/2009 9:22:04 AM