[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:

PHP Code:

$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>'; 


[MMJ]

I didn't see anything wrong except that you used Microsoft quotes:

var x=document.getElementById(”subjectid”);
and
document.getElementById(”varclass”)

Here you go:

JavaScript:

PHP Code:

<script type="text/javascript">
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);
}
</script> 


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>

As for the PHP, you should escape the input before you query the dbase:

PHP Code:

$subjectid = $_GET['subject'];
$subjectid = get_magic_quotes_gpc() ? mysql_real_escape_string(stripslashes($subjectid)) : mysql_real_escape_string($subjectid);
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>'; 


Otherwise you open the SQL Injection hole.

[Edfrommars]

Thanks for pointing out the messed up quotes. That's what I get for copying/pasting right from w3schools -_-

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 all your help!

[MMJ]

Anytime. :)