# Solved: AJAX/PHP Drop-Down



## Edfrommars (Feb 24, 2007)

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(&#8221;varclass&#8221;).innerHTML=xmlHttp.responseText;
      }
    }
  var x=document.getElementById(&#8221;subjectid&#8221;);
  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 '';
$result = mysql_query('SELECT * FROM class WHERE subjectid=' . $subjectid);
while($row = mysql_fetch_array($result))
    {
    echo '' . $row['name'] . '';
    }
echo '';
```


----------



## MMJ (Oct 15, 2006)

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:

```

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


```
$subjectid = $_GET['subject'];
$subjectid = get_magic_quotes_gpc() ? mysql_real_escape_string(stripslashes($subjectid)) : mysql_real_escape_string($subjectid);
echo '';
$result = mysql_query('SELECT * FROM class WHERE subjectid=' . $subjectid);
while($row = mysql_fetch_array($result))
    {
    echo '' . $row['name'] . '';
    }
echo '';
```
Otherwise you open the SQL Injection hole.


----------



## Edfrommars (Feb 24, 2007)

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 (Oct 15, 2006)

Anytime. :)


----------

