Question

I have a div that contains a form with two drop down lists in it. When the submit button is pressed on the form I have this javascript function…

function getExt(cgiScriptName,DivId){

        if ( document.getElementById(dropdown1) != null ){
            var value1 = document.getElementById(dropdown1).value;
        }
        if ( document.getElementById(dropdown2) != null ){
            var value2 = document.getElementById(dropdown2).value;
        }

        var xmlhttp;
        if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }  // code for IE7+, Firefox, Chrome, Opera, Safari
        else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }      // code for IE6, IE5


        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                document.getElementById(DivId).innerHTML=xmlhttp.responseText;
            }
        }

        cgiScriptName = cgiScriptName+"?selectOne="+value1+"&selectTwo="+value2;
        xmlhttp.open("GET",cgiScriptName,true);
        xmlhttp.send();

    // The content of DivId only changes if this if statement exists????  Why?????
        if ( document.getElementById(DivId) != null ){ alert('The Div is present'); }
}

The function runs and uses GET to get the HTML that I want. I have verified that this function assembles the GET call fine and returns the appropriate HTML from the CGI script. The problem is that this HTML is only displayed if that if statement is in the code. Otherwise the entire page becomes blank. The main div contains nothing. Why is this happening? Why does that if statement make this function work? Below is a watered down version of my webpage…

<div id="main">

<div id="curr_div">
<form onsubmit="return getExt('CGIScript.cgi?','curr_div'); return false;">
<select id="dropdown1">...</select>
<select id="dropdown2">...</select>
<input type="submit" value="Submit"/>
</form>
<table>.....</table>
</div>

</div>

Answer 1

The element-id variable probably gets cleared away or reused by some other context. In the end it’s a variable used internally by javascript.

Try to copy it into your closure…
On the other hand it’s quite possible that the xmlhttp object is cleared, try to return that and hold onto it in a variable…

Just two guesses:

function getExt(cgiScriptName,DivId){

        if ( document.getElementById(dropdown1) != null ){
            var value1 = document.getElementById(dropdown1).value;
        }
        if ( document.getElementById(dropdown2) != null ){
            var value2 = document.getElementById(dropdown2).value;
        }

        var xmlhttp;
        if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }  // code for IE7+, Firefox, Chrome, Opera, Safari
        else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }      // code for IE6, IE5

        var localdivid = DivId;
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                document.getElementById(localdivid).innerHTML=xmlhttp.responseText;
            }
        }

        cgiScriptName = cgiScriptName+"?selectOne="+value1+"&selectTwo="+value2;
        xmlhttp.open("GET",cgiScriptName,true);
        xmlhttp.send();

    return xmlhttp;
}