JavaScript Forum

**kbfirebreather** · 04-14-2010, 12:32 AM

I have a drop down, that onChange calls a http request and based on the result changes another drop downs attributes.

Here is the function that gets called when the drop down gets changed

Code:

function getTeeColors(courseid, gid)
{
    httpObject = getHTTPObject();
    if(httpObject != null)
    {
        httpObject.open("GET", "./golfIncludes/actions/~returnKnownCourseTeeColors.php?cid=" + courseid + "&gid=" + gid, true);
        httpObject.send(null);
        httpObject.onreadystatechange = enableTeeColors;
    }
    
}

Here is the function that the httpObject calls:

Code:

function enableTeeColors()
{
    if(httpObject.readyState == 4)
    {
        alert(httpObject.responseText);
    }
}

What the php page will output is tee colors (relating to golf), depending on which tee colors the user has enabled for a given course (which is the first drop down which triggers the http request)

My problem is:

Code:

 if(httpObject.readyState == 4)
    {
        alert(httpObject.responseText);
    }

Say I select a course (course1) that I have black and blue tees entered. When the javascript is done, it enables the teecolors drop down and enables the black and blue tees as selectable. Say course1 wasn't really what I wanted, and I really want course2. I'll change the drop down to course2, which only has blue tees entered for the course. When I change it to the correct course (course2) what ends up happening is the

Code:

alert(httpObject.responseText);

triggers twice. It triggers with "Black Blue" and then again with "Blue".

The "Black Blue" is a ghost of the first selection, which I don't want. Then the "Blue" gets alerted which is course2 which is really what I want. And as a result, instead of only the Blue tees being selectable, both the Black and Blue tees are selectable.

Any thoughts on why this is happening?

Thank you for any help.