I need help finding the stupid error with my code.

[Darth Sensei]

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 Code:

<?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

[Darth Sensei]

Ok, this just defies reason, unless I"m missing something stupid. When I created another set of controls and div's and simply replaced the first L with a R it works on the second set, but not the first set. They call the exact same functions and php page as well.

        <select name="RECColor" id="RECColor" onChange="checkRECCm()">

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

What the heck is the difference?

[glenngv]

getData(dataSource, 'LECCm');

LECCm is the div id where the textbox will be inserted, right?
But the textbox you are trying to insert inside the div has the same id as the div!

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

Id should be unique otherwise document.getElementById won't work.

[Darth Sensei]

I can't thank you enough for your help. It was driving me mad.