Advertisement

There's no such thing as a stupid question, but they're the easiest to answer.
Login
Search

Advertisement

Web Design & Development Web Design & Development
Search Search
Search for:
Tech Support Guy > > >

Solved: AJAX/PHP Drop-Down


(!)

Edfrommars's Avatar
Edfrommars Edfrommars is offline
Member with 94 posts.
THREAD STARTER
 
Join Date: Feb 2007
Location: Ohio, USA
Experience: Advanced
11-Jun-2008, 11:19 AM #1
Solved: AJAX/PHP Drop-Down
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:
Code:
<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:
Code:
<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's Avatar
MMJ MMJ is offline
Senior Member with 3,625 posts.
 
Join Date: Oct 2006
11-Jun-2008, 11:38 AM #2
I didn't see anything wrong except that you used Microsoft quotes:

Quote:
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 
document.getElementById("subjectid");
  
xmlHttp.open("GET""includes/updateclasses.php?subject=" x.options[x.selecteditem].valuetrue);
  
xmlHttp.send(null);
}
</script> 
HTML:
Code:
<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.

Last edited by MMJ; 11-Jun-2008 at 11:45 AM..
Edfrommars's Avatar
Edfrommars Edfrommars is offline
Member with 94 posts.
THREAD STARTER
 
Join Date: Feb 2007
Location: Ohio, USA
Experience: Advanced
11-Jun-2008, 11:52 AM #3
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**:
Quote:
Line: 61
Char: 2
Error: options[...].value is null or not an object
Firefox gives me:
Quote:
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!

Last edited by Edfrommars; 11-Jun-2008 at 12:27 PM..
MMJ's Avatar
MMJ MMJ is offline
Senior Member with 3,625 posts.
 
Join Date: Oct 2006
11-Jun-2008, 12:39 PM #4
Anytime. :)
As Seen On

BBC, Reader's Digest, PC Magazine, Today Show, Money Magazine
WELCOME TO TECH SUPPORT GUY!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.


Tags
ajax, html, javascript, php, web design

(clock)
THIS THREAD HAS EXPIRED.
Are you having the same problem? We have volunteers ready to answer your question, but first you'll have to join for free. Need help getting started? Check out our Welcome Guide.

Search Tech Support Guy

Find the solution to your
computer problem!




Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools


WELCOME
You Are Using: Server ID
Trusted Website Back to the Top ↑