Solved: AJAX/PHP Drop-Down

Discussion in 'Web Design and Development' started by Edfrommars, Jun 10, 2008.

  1. Edfrommars macrumors newbie

    Joined:
    Jun 10, 2008
    Location:
    Ohio, USA
    #1
    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(”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:
    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:
    $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. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    You're missing an event handler for the select box. You need to watch for onchange when using the select to call your JavaScript.

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

    notnek

    Joined:
    Oct 25, 2007
    #3
    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:

    Code:
    <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.
     
  4. Edfrommars thread starter macrumors newbie

    Joined:
    Jun 10, 2008
    Location:
    Ohio, USA
    #4
    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:
    Code:
    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:
    Firefox gives me:
    Edit: Got it, finally :D I changed x.options[x.selecteditem].value to just x.value

    Thanks for your help.
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    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.
     

Share This Page