I have one select list, which is populated from the DB like this:
<select name="position" id="position" onChange='itemdisplay(this.value)'>
<option value="<?php echo $til_subject; ?>"><?php echo $current_subject; ?></option>
<?php
while($row=mysqli_fetch_array($result)){
echo '<option value=' . $row['id'] . '>' . $row['linknavn'] . '</option>';
}
echo "</select>";
?>
// Next to this list i have the other dropdown which depends on whatever is selected in the first one: Which I dont know how to update with ajax..I need to go around the database somehow, after the first list is set.
<select name="page_position" id="page_position">
<option>- Choose a position -</option> // HELP NEEDED HERE...
<option value=""></option> // HELP NEEDED HERE...
</select>
I then want to, after the user have chosen a subject from the select list, populate another dropdown list with the positions available under the specific subject. This info is also taken from the Database.
I havent used AJAX ever before, so is probably wrong here and there.
This is my ajax file, which I include in the page:
// JavaScript Document
function MakeRequestObject(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} catch (E) {
xmlhttp = false;
}
}
if(!xmlhttp && typeof XMLHttpRequest!='undefined'){
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function itemdisplay(cat){
var xmlhttp=makeRequestObject();
xmlhttp.open('GET', 'rediger.php?&page_position='+cat, true);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var content = xmlhttp.responseText;
if ( content ) {
document.getElementById('page_position').innerHTML = content
}
}
}
xmlhttp.send(null)
}
I am not sure if i am writing the xmlhttp.open correctly?
And where do I make the database request, in the js file or in the file with the dropdowns?
Confusion is complete, so hope to from someone who finds this easy :-)