1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: AJAX/PHP Drop-Down

Discussion in 'Web Design & Development' started by Edfrommars, Jun 11, 2008.

Thread Status:
Not open for further replies.
Advertisement
  1. Edfrommars

    Edfrommars Thread Starter

    Joined:
    Feb 24, 2007
    Messages:
    94
    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:
    $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>';
     
  2. MMJ

    MMJ Guest

    Joined:
    Oct 15, 2006
    Messages:
    3,625
    I didn't see anything wrong except that you used Microsoft quotes:

    Here you go:

    JavaScript:
    PHP:
    <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:
    $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.
     
  3. Edfrommars

    Edfrommars Thread Starter

    Joined:
    Feb 24, 2007
    Messages:
    94
    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**:
    Firefox gives me:
    Edit: Got it, finally :D I changed x.options[x.selecteditem].value to just x.value

    Thanks for all your help!
     
  4. MMJ

    MMJ Guest

    Joined:
    Oct 15, 2006
    Messages:
    3,625
    Anytime. :)
     
As Seen On
As Seen On...

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.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/720473