Ajax With Select

[Err]

I don't seem to understanding something about Ajax. I get the whole thing about passing variables to the server through JavaScript. What I don't understand is how to use it with the <select> tag and query a database and get the results on the same page. I've read different ways of implementing this, but I don't understand how to do it.I'm trying to use code like this:

function XHConn() {  var xmlhttp, bComplete = false;  try {xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}  catch (e) {    try {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}    catch (ex) {      try {xmlhttp = new XMLHttpRequest();}      catch (exe) {xmlhttp = false;}    }  }  if (!xmlhttp) {return null;}  this.connect = function(sURL, sMethod, sVars) {    if (!xmlhttp) {return false;}    bComplete = false;    sMethod = sMethod.toUpperCase();    try {      if (sMethod == "GET") {        xmlhttp.open(sMethod, sURL+"?"+sVars, true);        sVars = "";      }      else {        xmlhttp.open(sMethod, sURL, true);        xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");      }      xmlhttp.onreadystatechange = function() {        if (xmlhttp.readyState == 4 && !bComplete) {bComplete = true;}      };      xmlhttp.send(sVars);    }    catch(z) {return false;}    return true;  };  return this;}

An I even using the correct JS code to do this? I'm just looking for a way to understand this. Examples will help out greatly.

[justsomeguy]

That's not a bad way to do it, although I'm not sure what this is going to be scoped to in the function, I think it might be the window object. So you would be returning the entire window object. It would be better to just return a new object with your connect method on it. I'm also not sure how scoping inside the function is going to work, I'm not sure if it's going to find bComplete or xmlhttp. So I added those as properties on the object you're returning, and then the connect method references them through this. A few other minor things:When the method is get, you should send null. I switched it to set sVars to null instead of the empty string if the method is get.I don't think there's a request header called "Method". You shouldn't need to use that line.The response handler function isn't doing anything except setting bComplete to true, so it's not going to update the page with anything. You might want to send the response handler as another parameter to the connect method.You're catching the exception in the connect method when you send the request but just returning false, so you won't know if the request failed or if an error happened.

function XHConn() {  var xmlhttp, bComplete = false;  try {xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}  catch (e) {	try {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}	catch (ex) {	  try {xmlhttp = new XMLHttpRequest();}	  catch (exe) {xmlhttp = false;}	}  }    if (!xmlhttp) {return null;}  return ({	xmlhttp: xmlhttp,	bComplete: false,	connect: function(sURL, sMethod, sVars) {	  if (!this.xmlhttp) {return false;}	  this.bComplete = false;	  sMethod = sMethod.toUpperCase();	  try {		if (sMethod == "GET") {		  this.xmlhttp.open(sMethod, sURL+"?"+sVars, true);		  sVars = null;		}		else {		  this.xmlhttp.open(sMethod, sURL, true);		  this.xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");		  this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");		}		this.xmlhttp.onreadystatechange = function() {		  if (this.xmlhttp.readyState == 4 && !this.bComplete) {this.bComplete = true;}		};		this.xmlhttp.send(sVars);	  }	  catch(z) {return false;}	  return true;	}  });}

[Err]

Thanks for the reply! I appreciate you looking over the code. But my question still remains, how can I get JS to query depending on the <option> value? Method POST / GET?

[justsomeguy]

You just get the selected value and do whatever you want from there. You use document.getElementById to get the select element, and the value property should be the selected value. You can send that to PHP, or do whatever you want with it.