javascript select box hanging on second select in ie7

Question

I have a drop down select box inside a div. When the user clicks on change, a dropdown box appears next to the change/submit button and the user makes a selection which then updates the db and the selection appears instead of the dropdown. All works fine in IE8 and firefox but in IE7 it allows one selection (there are several identical dropdowns) but the second time a selection is made it hangs on please wait. This is the relevant code

<td width=200>

<input type="button" onclick="startChanging(this)" value="Change" /></td>

<script type="text/javascript">
var selectBox, isEditing = false;
var recordvalue;
if( window.XMLHttpRequest ) {
    recordvalue = new XMLHttpRequest();
} else if( window.ActiveXObject ) {
    try {
        recordvalue = new ActiveXObject('Microsoft.XMLHTTP');
    } catch(e) {}
}
window.onload = function () {
    selectBox = document.getElementById('changer');
    selectBox.id = '';
    selectBox.parentNode.removeChild(selectBox);

};
function startChanging(whatButton) {
    if( isEditing && isEditing != whatButton ) { return; } //no editing of other entries
    if( isEditing == whatButton ) { changeSelect(whatButton); return; } //this time, act as "submit"
    isEditing = whatButton;
    whatButton.value = 'Submit';
    var theRow = whatButton.parentNode.parentNode;
    var stateCell = theRow.cells[3]; //the cell that says "present"
    stateCell.className = 'editing'; //so you can use CSS to remove the background colour
    stateCell.replaceChild(selectBox,stateCell.firstChild); //PRESENT is replaced with the select input
    selectBox.selectedIndex = 0;
}
function changeSelect(whatButton) {
    isEditing = true; //don't allow it to be clicked until submission is complete
    whatButton.value = 'Change';
    var stateCell = selectBox.parentNode;
    var theRow = stateCell.parentNode;
    var editid = theRow.cells[0].firstChild.firstChild.nodeValue; //text inside the first cell
    var value = selectBox.firstChild.options[selectBox.firstChild.selectedIndex].value; //the option they chose

    selectBox.parentNode.replaceChild(document.createTextNode('Please wait...'),selectBox);
    if( !recordvalue ) {
        //allow fallback to basic HTTP
        location.href = 'getupdate.php?id='+editid+'&newvalue='+value;
    } else {
        recordvalue.onreadystatechange = function () {
            if( recordvalue.readyState != 4 ) { return; }
            if( recordvalue.status >= 300 ) { alert('An error occurred when trying to update'); }
            isEditing = false;
            newState = recordvalue.responseText.split("|");
            stateCell.className = newState[0];
            stateCell.firstChild.nodeValue = newState[1] || 'Server response was not correct';
        };
        recordvalue.open('GET', "getupdate.php?id="+editid+"&newvalue="+value, true);
        recordvalue.send(null);
    }
}
</script>    

If anyone has any idea why this is happening I'd be very grateful

Answer 1

ok managed to solve it. I moved the recordvalue.open line near the bottom inside te last else loop and it works perfectly in all browsers just don't ask me why