I have followed the example at w3schools to use AJAX to dynamically connect to a mysql database using a PHP script and bring the content back to the page. I have everything set up in the example link below. My problem is that I want to do two seperate queries on a form and bring the information back to the page. The queries both work but the placement of the information is giving me problems. It places the results of both queries in the same <div> container. Even though the <div> containers have different ID's.


http://www.coastalpet.com/testing/product_admin_st4.php

The javascript cod is as follows:

var xmlHttp

function showColor(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
//var url="getcustomer.asp"
var url="getcolor.php?ID="
url=url+""+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtColor").innerHTML=xmlHttp.responseText
}
}

function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

Does anyone have any suggestions on how to get the results in the right spots on the page. Thank you!

That's because you have defined the stateChanged() function twice.

First time in here: <script src="selectcolor.js"></script> and the second time in here: <script src="selectdescription.js"></script>

Renaming them to colorStateChanged and descriptionStateChanged, or something, should do the trick, but there's still more work to be done, as you seem to be doing everything two times. If you passed the name of the required PHP file as a parameter to your show function, you could trim down a lot of unnecessary repetition.

There are better ways to do this, but you could get rid of the other js file, replace the function showColor(str) line with

function showColor(str, getFile)

and then replace the line

var url="getcolor.php?ID="

with

var url=getFile+"?ID="

and then finally change the function calls to

showColor(this.value, 'filename.php')

Now, does this actually work? I have no idea, but you should get the point, at the very least.

How about making these changes to the JS

function showColor(str, getFile, div)

xmlHttp.onreadystatechange=DescriptionstateChanged(div)

function DescriptionstateChanged(div)

document.getElementById(div).innerHTML=xmlHttp.responseText

and this one to the HTML

showColor(this.value, 'filename.php', 'txtColor')

Sorry about that. Try

xmlHttp.onreadystatechange=function() { DescriptionstateChanged(div); };

instead.