Help controlling multiple dropdowns

[gia999]

Hi there,

I wonder if anyone can help me... I am trying to get AJAX working with my form and I am just learning....

Basically I want to control the contents of various dropdowns from one set of radio buttons. Now, I have one dropdown working for the Location, but I don't know how to get it to control multiple... so I may also control the Type dropdown from a database also based on the same radio buttons... if anyone can help I would be so grateful as I tried so many things last night and it just kept hitting an error . Thank you so much.

The set-up I have is...

ON MY MAIN THE PAGE

<form method="post" action="" name="form1">

<div class="formLine">
<% sqlInfo = "SELECT * FROM sys_parentcat WHERE isActive=1"
set infoRs = connMain.execute(sqlInfo)
if NOT infoRs.EOF then
while NOT infoRs.EOF
thisLoopID = infoRs("ID") %>
<input type="radio" name="jParent" value="<%= thisLoopID %>" onClick="getAjax('/ajax/dropdowns_loc.asp?parent='+this.value)" /> <%= infoRs("pName") %>
<% infoRs.MoveNext
Wend
end if
infoRs.close
set infoRs = nothing %>
</div>

<div class="formLine">
<label for="jLoc">Location</label>
<div id="ajaxLocation">
<select name="jLoc" id="jLoc">
<option value="0">Select Location...</option>
</select>
</div>
</div>

<div class="formLine">
<label for="jType">Type</label>
<div id="ajaxType">
<select name="jType" id="jType">
<option value="0">Select Type...</option>
</select>
</div>
</div>

IN THE EMBEDDED JS FILE

function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}

return xmlhttp;
}



function getAjax(strURL) {

var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('ajaxLocation').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}

}

IN THE DROPDOWN CONTENTS PAGE (/ajax/dropdowns_loc.asp)

<!--#include file="inc_dbconn.asp" -->
<select name="jLoc" id="jLoc">
<option value="0">Select Location...</option>
<option value="0">----------------</option>
<% ajax_parent = trim(request.QueryString("parent"))

sqlGet = "SELECT * FROM sys_areas WHERE parentID = " & ajax_parent
set getRs = connMain.execute(sqlGet)
if NOT getRs.EOF then
while NOT getRs.EOF %>
<option value="<%= getRs("ID") %>"><%= getRs("pArea") %></option>
<% getRs.MoveNext
Wend
end if
getRs.close
set getRs = nothing %>
</select>

 

[grtammi]

This line here:

<input type="radio" name="jParent" value="<%= thisLoopID %>" onClick="getAjax('/ajax/dropdowns_loc.asp?parent='+this.value)" /> <%= infoRs("pName") %>

will render as:

<input type="radio" name="jParent" value="1" onClick="getAjax('/ajax/dropdowns_loc.asp?parent='+this.value)" />First Value

this.value cannot be evaluated in the input box. What I would do is this:

<input type="radio" name="jParent" value="<%= thisLoopID %>" onClick="getAjax('/ajax/dropdowns_loc.asp?parent=<%=thisLoopID?>" /> <%= infoRs("pName") %>

Embed the control's value right into the onClick event, since you know the control's value as the time the document is rendered.


Greg

 

[grtammi]

Oops!

You can tell I'm a PHP coder; change <%=thisLoopID?> to <%=thisLoopID%> ... damned closing tags.

Greg