Dynamically Generated dropdown boxes

[climberdude]

I've been working on a site with multiple <select> menus that are generated dynamically with PHP and Javascript and I've been using an AJAX approach.

The javascript calls my php page, which hits a database, gets the information I need, then creates XML that is passed back and inserted into a blank <div> tag so you can't see the <select> before.
Ex. of XML created:

[HTML] <Select name="test" onchange="actio n(this.form)">
<Option value = 'id from db'>1</option>
</select>[/HTML]
When you select a new option from this dropdown menu, a new javascript is called and spits back another dropdown menu.
My idea has worked very well in FireFox so far. Pretty slick.

The only problem is they aren't working in IE7.

Any suggestions? Has anyone tried this before? What method did you use? Am I way off? Thanks for the feed back.

[dmjpro]

I've been working on a site with multiple <select> menus that are generated dynamically with PHP and Javascript and I've been using an AJAX approach.

The javascript calls my php page, which hits a database, gets the information I need, then creates XML that is passed back and inserted into a blank <div> tag so you can't see the <select> before.
Ex. of XML created:

[HTML] <Select name="test" onchange="actio n(this.form)">
<Option value = 'id from db'>1</option>
</select>[/HTML]
When you select a new option from this dropdown menu, a new javascript is called and spits back another dropdown menu.
My idea has worked very well in FireFox so far. Pretty slick.

The only problem is they aren't working in IE7.

Any suggestions? Has anyone tried this before? What method did you use? Am I way off? Thanks for the feed back.

Post your code so that we can have closer look on your code.

Debasis Jana

[climberdude]

Okay, I put some code in that I hope helps.
When the page loads I have one drop down for them to select from, Prof.
When the make a selection it goes to my javascript getCourse.

[HTML]<table>
<tr>
<th>Select a professor:</th>
<th id="cHead"></th>
<th id="record"></th>
</tr>
<tr>
<th><form name="myProf">
<select name="Prof" onchange="getCo urse(document.m yProf.Prof)" >

<option value="-1" on></option>
<OPTION VALUE=testusr>T est User</option><OPTION VALUE=climber>A nthony Earl Quinn</option><OPTION VALUE=sellswor> Sharon Ellsworth</option><OPTION VALUE=jlm59>Jar om L McDonald</option> </select></form></th>
<th>
<form name="classes">
<div id="course"></div>
</form>

</th>
<th>
<form name="recording s">
<div id="recording"> </div>
</form>
</th>
</tr>

</table>[/HTML]

 javascipt
function getCourse(dropdown){
    div = 'course';
    var index= dropdown.selectedIndex;
    var val = dropdown.options[index].value;
    //alert("sending first selection: " + val);
    sendRequest('course.php?netID='+val, val);
    var head = document.getElementById('cHead');
    head.innerHTML= "Select Course:";
}//end getCourse

Here is the sendRequest waits for a reply, when it does this is the code:

function onReadyState(){
    var ready = req.readyState;
    var data = null;
    if(ready == 4){
        data = req.responseText;
    }
    toConsole(data);
}//end onReady

The code for toConsole

function toConsole(val){
    var console = document.getElementById(div);
    console.innerHTML = val;
}//end toConsole

On server side some information is sent to course.php which reads the data base and creates an XML document
and sends it back like this.

[PHP]echo $doc->saveXML();[/PHP]

in Firefox it comes back looking like this:
[HTML]
<select name="class" onchange="getRe cording(documen t.classes.class )" id="ie7">
<option>
</option>
<option value="1">
PORT 321
</option>
<option value="5">
SPAN 211
</option>
<option value="6">
PORT 101
</option>
</select>
[/HTML]

When I make a selection here the same process happens only the javascript calls getRecording instead of getCourse to dynamically make another dropdown box. IT works fine in Firefox. In IE it doesn't work. I'm wondering if it has something to do with XML and the innerHTML I'm using in javascript.