[PHP/JScript] Updating Drop-Down List
Author
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:
<pre>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<span style="font-weight:bold;">.split(":")
if (aVAR.length > 0)
{
document.forms<span style="font-weight:bold;">.FlagNumber.value = aVAR[0]
}
else
break;
}
</script></pre>
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! :<
<!--EDIT--><span class=editedby><!--/EDIT-->[Edited by - chbrules on June 9, 2005 10:33:39 PM]<!--EDIT--></span><!--/EDIT-->
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.)
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.
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.split(":") if (aVAR.length > 0) { var newOption = document.createElement("OPTION"); newOption.value = aVAR[0]; newOption.text = aVAR[1]; document.forms.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.
Author
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:
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:<br><br><pre>onchange="SendQuery(this.value, 1, document.all.subgroup)"</pre><br><br>Does the javascript need some other type of object besides that XML thing to hold a PHP/MySQL query result? Thanks!
<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.split(":") var newOption = document.createElement("OPTION"); newOption.value = oItemArray[0]; newOption.text = oItemArray[1]; oDestination = 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:<br><br><pre>onchange="SendQuery(this.value, 1, document.all.subgroup)"</pre><br><br>Does the javascript need some other type of object besides that XML thing to hold a PHP/MySQL query result? Thanks!
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. <br>- Because it's an ActiveX object on MSIE, if they have disabled ActiveX, it won't work (obviously)<br>- 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.<br><br>This should in no way dissuade you from using XMLHttpRequest, it does seem to be a cool thing to do these days.<br><br>Mark
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. <br>- Because it's an ActiveX object on MSIE, if they have disabled ActiveX, it won't work (obviously)<br>- 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.<br><br>This should in no way dissuade you from using XMLHttpRequest, it does seem to be a cool thing to do these days.<br><br>Mark
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
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
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
