The code should be simple. When a user changes the "color" select control on my page, I use Ajax to generate a textbox if they choose "CM" as a color. The control goes into a div with id=LECCm. Here is the basic code:

From the main page:

<select name="LECColor" id="LECColor" onChange="checkLECCm()"> // this is followed by a ton of colors.

Here is the function:


function checkLECCm()
{
dataSource = '/DivTexts/LECCm.php?CM=' +document.signbuilder.LECColor.options[document.signbuilder.LECColor.selectedIndex].value;
alert(dataSource);
getData(dataSource, 'LECCm');
}


Which calls the function:

function getData(dataSource, divID)
{
alert(dataSource);
ajaxSetup();
if (xmlHttp) {
var obj = document.getElementById(divID);
xmlHttp.open("GET", dataSource);

xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
obj.innerHTML = xmlHttp.responseText;
}
}
}
xmlHttp.send(null);
}

Which calls the function (last one, promise):

function ajaxSetup() {
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
}


The code to determine if the CM box should be shown is the php file:

<?php
if ($_GET["CM"]=="CM") {

$displayCM = '<label>CM=</label><input name="LECCm" type="text" id="LECCm" size="12" maxlength="12" />';
} else {
$displayCM = "";
}
echo $displayCM;
?>

Here is the problem. When I choose another color everything is fine. When I choose CM the proper control comes in correctly also. However, if the user switches to a different color the program does not remove the control. It just doesn't seem to work at all after CM is chosen.

Can any of you gurus figure out my problem? I've been over this code at least 30 times and have no idea what I did wrong.

Dave