Sign in to follow this  
chbrules

[PHP/JScript] Updating Drop-Down List

Recommended Posts

I have a drop-down list that gets populated by a query result from a MS SQL database using ASP. That works fine, but what I want to do is, when a user selects one of the options on that drop-down list, I want another drop-down list to populate accordingly to whichever choice is made on the previous. Someone showed me some javascript (which I'm really not good at) that did a call to an ASP page which just returned all the HTML needed from that query to the new drop-down, but I really don't know how to go about setting it up. Here's what I have; A drop-down list called 'Category' which is populated by an ASP query result, another drop-down list called 'FlagNumber' that I want to populate dynamically w/ javascript from an ASP query, and this javascript I wrote which isn't working:
function SendQuery(Value)
{
  var sReturn
  var oVARArray
  var aVAR
    
  var xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
  xmlHTTP.open("GET", "GetType.asp?ID=" + Value, false);
  xmlHTTP.send()
    
  var xmlDOM = new ActiveXObject("Microsoft.XMLDOM");

  sReturn = xmlHTTP.ResponseText;

  oVARArray = sReturn.split(";")

  	
  for (i=0; i < oVARArray.length; i++)
  {	

  	aVAR = oVARArray[i].split(":")

  	if (aVAR.length > 0)
  	{
		document.forms[i].FlagNumber.value = aVAR[0]
  	}
  	else
  		break;
	
  }
</script>
That code is probably totally wrong. I just need to get the values from this ASP query page 'getType.asp' and dynamically populate the 'FlagNumber' drop-down. Help! :< [Edited by - chbrules on June 9, 2005 10:33:39 PM]

Share this post


Link to post
Share on other sites
Well, to start, your function doesn't have a closing bracket :)

here's one way to do it, but as far as I know, it'll only work in Internet Explorer. (I'm assuming FlagNumber is the name/id of your <SELECT> tag.)

function SendQuery(Value)
{
var sReturn
var oVARArray
var aVAR

var xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
xmlHTTP.open("GET", "GetType.asp?ID=" + Value, false);
xmlHTTP.send()

var xmlDOM = new ActiveXObject("Microsoft.XMLDOM");

sReturn = xmlHTTP.ResponseText;

oVARArray = sReturn.split(";")

for (i=0; i < oVARArray.length; i++)
{
// I'm assuming that these are value:text pairs.
aVAR = oVARArray[i].split(":")

if (aVAR.length > 0)
{
var newOption = document.createElement("OPTION");
newOption.value = aVAR[0];
newOption.text = aVAR[1];
document.forms[i].FlagNumber.options.add(newOption);
}
else
break;
}

}




A better way would be to have your asp page simply return all the <OPTION> tags for the <SELECT> element, and insert them directly using selectElement.innerHTML=sOptionsString;

Of course, this may not work.. even though MSDN states that it's supported, it doesn't work in IE.

Share this post


Link to post
Share on other sites
Thanks got it working. Now to ask, how do I do this with PHP/MySQL? I have a little project at home I want to do this with lists for. I did all the same stuff, made the same type of PHP/MySQL query and printing to return the same results to the javascript script, but it doesn't even run the thing, says I have errors. Here's the code:

<Script Language="javascript">
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;




function SendQuery(ID, Method, oDestination)
{
var sReturn
var oOptionArray,oItemArray

var xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
xmlHTTP.open("GET", "GetProduct.php?ID=" + ID + "&Method=" + Method, false);
xmlHTTP.send()
var xmlDOM = new ActiveXObject("Microsoft.XMLDOM");

sReturn = xmlHTTP.ResponseText;

oOptionArray = sReturn.split(";")
oDestination.length = 0

for(i=0; i < oOptionArray.length; i++)
{
oItemArray = oOptionArray[i].split(":")

var newOption = document.createElement("OPTION");
newOption.value = oItemArray[0];
newOption.text = oItemArray[1];
oDestination[i] = newOption
}

oDestination.selectedIndex = 1;
}

}
</script>


This code worked on my ASP project, but now it won't work for PHP. I checked the firefox javascript console and it says SendQuery() undefined a couple times. Inside the header of the <select> tag I put:

onchange="SendQuery(this.value, 1, document.all.subgroup)"


Does the javascript need some other type of object besides that XML thing to hold a PHP/MySQL query result? Thanks!

Share this post


Link to post
Share on other sites
There are three basic ways to do this:

1. Reload the entire page, regenerate it with the appropriate values in the 2nd list box

- This is the most stupid, but most robust way of doing it - you don't need javascript at all, or if you do, you only need a onchange="document.forms.myform.submit()"

2. Load all of your data into a client-side array (containing every possible value for the 2nd list box). When the user changes the value of the first listbox, find the appropriate values for the 2nd listbox, and populate it client-side.

- This is slightly cleverer, and will work fine as long as you don't have too much data.

3. Use XMLHttpRequest (as above)

- This should work in principle at least, but has several caveats:
- XMLHttpRequest does not behave identically on different browsers. It is an ActiveX object on MSIE, but also exists as an object you can construct from javascript in Mozilla, Safari and perhaps others.
- Because it's an ActiveX object on MSIE, if they have disabled ActiveX, it won't work (obviously)
- XMLHttpRequest is fairly difficult to program correctly - you really have to hook events etc, to detect when it's loaded, *then* unpick the XML DOM object which comes back (if you're using XML) to get the bits you want.

This should in no way dissuade you from using XMLHttpRequest, it does seem to be a cool thing to do these days.

Mark

Share this post


Link to post
Share on other sites
Oh yes, you may want to set the "async" property to false, otherwise the send() method may return immediately before the query has actually been completed.

Alternatively you can run it asynchronously and hook the event to tell you that the request is complete.

I see that you are using a ; delimited text string rather than XML as a return type. This is reasonable for simple data (although be aware of data escaping as necessary).

Mark

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this