Solved: AJAX/PHP Drop-Down

[Edfrommars]

I am having some trouble getting a form working properly for a website that I am currently building. Basically I have two drop-downs that effect each other. When the user selects something from the Subjects box, an AJAX request is sent to update the Classes box with all the classes that are categorized under that subject. My problem is that I'm horrible at Javascript-I couldn't get it to work at all. It seems as though the JS function isn't even called. Any ideas?

Here is my javascript:

<script type="text/javascript">
function updateclassitems()
{
var xmlHttp;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
      document.getElementById(”varclass”).innerHTML=xmlHttp.responseText;
      }
    }
  var x=document.getElementById(”subjectid”);
  xmlHttp.open("GET","includes/updateclasses.php?subject=" + x.options[x.selecteditem].value,true);
  xmlHttp.send(null);
  }
</script>

Here is my HTML:

<form action="edit.php?id=<?php echo $fileid; ?>" method="post" name="editform">
  <table>
    <tr><td>File:</td><td><?php echo $filename; ?></td></tr>
    <tr><td>Subject:</td><td><select name="subject" onchange="updateclassitems();" id="subjectid"><?php getSubjects($subjectid); ?></select></td></tr>
    <tr><td>Teacher:</td><td><input type="text" name="teacher" maxlength="20" value="<?php echo $teacher; ?>" /></td></tr>
    <tr><td>Title:</td><td><input type="text" name="title" maxlength="30" value="<?php echo $title; ?>" /></td></tr>
    <tr><td>Class:</td><td id="varclass"><select name="classid"><?php getClasses($classid, $subjectid); ?></select></td></tr>
    <tr><td>Description:</td><td><textarea name="description" cols="45" rows="5"><?php echo $description; ?></textarea></td></tr>
    <tr><td colspan="2"><input type="checkbox" name="delete" />Delete this file</td></tr>
    <tr><td colspan="2"><input type="submit" name="edit" value="Submit Changes" /></td></tr>
  </table>
  <input type="hidden" name="fileid" value="<?php echo $fileid; ?>" />
  <input type="hidden" name="userid" value="<?php echo $userid; ?>" />
  <input type="hidden" name="filename" value="<?php echo $filename; ?>" />
</form>

Here is my backend PHP:

$subjectid = $_GET['subject'];
echo '<select name="classid">';
$result = mysql_query('SELECT * FROM class WHERE subjectid=' . $subjectid);
while($row = mysql_fetch_array($result))
    {
    echo '<option value="' . $row['classid'] . '">' . $row['name'] . '</option>';
    }
echo '</select>';

 

[angelwatt]

You're missing an event handler for the select box. You need to watch for onchange when using the select to call your JavaScript.

<tr><td>Class:</td><td id="varclass">
  <select name="classid" [B]onchange="updateclassitems()"[/B]><?php getClasses($classid, $subjectid); ?></select>
</td></tr>

 

[notnek]

On a side note, you're repetitive in your form with the variable $fileid If you want it to remain hidden, just use $_POST['fileid'] on your edit.php file and use this form:

<form action="edit.php" method="post" name="editform">
  <table>
    <tr><td>File:</td><td><?php echo $filename; ?></td></tr>
    <tr><td>Subject:</td><td><select name="subject" onchange="updateclassitems();" id="subjectid"><?php getSubjects($subjectid); ?></select></td></tr>
    <tr><td>Teacher:</td><td><input type="text" name="teacher" maxlength="20" value="<?php echo $teacher; ?>" /></td></tr>
    <tr><td>Title:</td><td><input type="text" name="title" maxlength="30" value="<?php echo $title; ?>" /></td></tr>
    <tr><td>Class:</td><td id="varclass"><select name="classid"><?php getClasses($classid, $subjectid); ?></select></td></tr>
    <tr><td>Description:</td><td><textarea name="description" cols="45" rows="5"><?php echo $description; ?></textarea></td></tr>
    <tr><td colspan="2"><input type="checkbox" name="delete" />Delete this file</td></tr>
    <tr><td colspan="2"><input type="submit" name="edit" value="Submit Changes" /></td></tr>
  </table>
  <input type="hidden" name="fileid" value="<?php echo $fileid; ?>" />
  <input type="hidden" name="userid" value="<?php echo $userid; ?>" />
  <input type="hidden" name="filename" value="<?php echo $filename; ?>" />
</form>

IMO, you should try to move away from table layouts and instead go with CSS to position everything.

 

[Edfrommars]

angelwatt, I have my event handler on the Subject drop-down. I want the selected item of that drop-down to effect the items in my Classes drop-down.

notek, Thanks for the input, I will keep those things in mind later down the road. The only reason my code looks so sloppy right now is because I'm trying to focus on getting the functionality to work. I can always go back at the end and make all the minor changes.

Edit: I was able to get the function to call with this script:

function updateclassitems()
	{
	var xmlHttp = window.ActiveXObject ? new ActiveXObject("MSXML2.XMLHTTP") : new XMLHttpRequest();
	xmlHttp.onreadystatechange = function()
		{
		if (xmlHttp.readyState==4) document.getElementById("varclass").innerHTML = xmlHttp.responseText;
		}
	var x = document.getElementById("subjectid");
	xmlHttp.open("GET", "includes/updateclasses.php?subject=" + x.options[x.selecteditem].value, true);
	xmlHttp.send(null);
	}

Anyways, now I get a Javascript error. Internet Explorer told me I had an error on the page:

Line: 61
Char: 2
Error: options[...].value is null or not an object

Firefox gives me:

Error: x.options[x.selecteditem] has no properties
Source File: http://192.168.1.115/edit.php?id=7
Line: 61

Edit: Got it, finally I changed x.options[x.selecteditem].value to just x.value

Thanks for your help.

 

[angelwatt]

angelwatt, I have my event handler on the Subject drop-down. I want the selected item of that drop-down to effect the items in my Classes drop-down.

Oops, I just did a quick scan of the code for a select box and didn't realize there was two of them. Glad you got the problem figured out.