[SOLVED] Help with AJAX

[timmah1]

I'm just new to AJAX, and I'm trying to get a form to work properly.

 

I have names in a drop-down box, when you click on a certain name, it's suppose to show the name on the form

It works, but no matter what drop-down I select, the value shows on every div tag.

 

My form has these

<div id="plumbingHint"><b></b></div>
<select name="plumbing" id="plumbing" onClick="plumbingUser(this.value)">
<option value="blah">blah</option
</select>

<div id="hvacHint"><b></b></div>
<select name="hvac" id="hvac" onClick="phvacUser(this.value)">
<option value="blah1">blah1</option
</select>

Here are the functions

var xmlHttp

function hvacUser(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getuser.php"
url=url+"?q="+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("hvacHint").innerHTML=xmlHttp.responseText 
} 
}

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

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

 

 

Can anybody help me out here?

 

Thanks in advance

[PC Nerd]

instead..... set your function at the end as an event...

 

xmlHttp.onreadystatechange = function() {

  document.getElementById.... .etc//

}

 

just a few pointers on your code:

 

xmlHttp=GetXmlHttpObject()  // isnt this wrong anyway?

Use:

 

try {

xmlHttp = new XMLHttpRequest();

}

catch(e) {

try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

}

catch(e) {

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

catch(e) {

return false;

}

}

}

that will make it cross browser for you.

 

 

 

if your interested in writing yourself a wrapper for ajax to make it easier to use,  then look into callback functions....

 

 

gdlk.

[corbin]

As far as I know, GetXmlHttpObject() is not a native function to any browser, so he probably is using a function similar to what you posted, and he just forgot to post the source of it.

[timmah1]

I have two codes,

 

ajax.js

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}
return xmlHttp;
}

 

Then the code for the functions

var xmlHttp

function hvacUser(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getuser.php"
url=url+"?q="+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("hvacHint").innerHTML=xmlHttp.responseText 
} 
}

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

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

[corbin]

I'm not sure if it's the problem or not, but you shouldn't be defining stateChanged() twice.  You should either use two different functions, like stateChangedHVAC() and stateChangedPlumbing() or something.  Or, you could use anonymous functions  (eg:

onreadystatechange = function() { alert(this.responseText); }

).

[timmah1]

I've tried a bunch of different things, with all of the simple example given, and nothing seems to work

 

Nevermind,

The problem to begin with was my select box, I had this for both

onClick="hvacUser(this.value)"
onClick="hvacUser(this.value)"

 

When I should have had

onClick="hvacUser(this.value)"
onClick="plumbingUser(this.value)"

 

This is my final code that works

var xmlHttp

function hvacUser(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getuser.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChangedhvacUser 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChangedhvacUser() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("hvacHint").innerHTML=xmlHttp.responseText 
} 
}


function plumbingUser(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getplumbing.php"
url=url+"?p="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChangedplumbingUser 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChangedplumbingUser() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("plumbingHint").innerHTML=xmlHttp.responseText 
} 
}

 

Thank you everybody for your help, it is truly appreciated! :-)