Friday, June 22, 2012

How to create an AJAX drop down box

My goal in this was to create a dropdown that then when selecting the 1 out of the 4 of the options, part of the webpage would change based on the selection. Here is the HTML:
<select name="ajax" onChange="getinfo(this.value)">
  <option value="" selected="selected">Please Select A Choice</option>
                <option value="option1">option1</option>                         
                <option value="option2">option2</option>
                <option value="option3">option3</option>
                <option value="option4">option4</option>
</select>
Here is the javascript:
<script type="text/javascript">
function getinfo (str)
{
   if (str=="")
      {
        //getElementById is the id tag name innerHTML replaces everything where that tag is with what is after the "="
        document.getElementById("htmlid").innerHTML="";

        return;
      }
          if (window.XMLHttpRequest)
             {
                xmlhttp=new XMLHttpRequest();
             }
          

         xmlhttp.onreadystatechange=function()
            {
               if (xmlhttp.readyState==4 && xmlhttp.status==200)
                 {
                    //readyState 4 means its in a ready state to do whatever, 200 means that its a legit page not 404
                    //split takes the string that is returned with what ever separates the data is in the ""

                     var data = xmlhttp.responseText.split ("/");

  xmlhttp.open("GET","search.php?q="+str,true);

  xmlhttp.send();

 };
The first thing that is done is it goes and "GETS" the page called search.php and pass it the value of q. If you would selection option 1 then the value of option 1 would get passed as the variable q.
At this point you would do whatever you want like search through company names or employee names. At the end of it to return the value you would do this:
echo $foo1 . "/" . $foo2 . "/" . $foo3 . "/" . $foo4. "/"
When the data is sent back it is one long string. I had 4 squares beside each other so I had to go back and forth to get it to show below each other. This required me to split it up. You will see above that I hard coded "/" in between them. That is my value I'm looking for when I called
var data = xmlhttp.responseText.split ("/");

document.getElementById("htmlid").innerHTML=data[x];

var foo = data[x]+" ext "+data[x];
the X is the position that it is located at in the return string when split up. The one below it shows how you could add 2 values that are returned. An example of that would be firstname + lastname. The htmlid is the value in the html code for example:
<td id='htmlid'></td>
When that is called it replaces whatever is currently being displayed next to htmlid. I was also successful in doing this with replacing whitespace with more drop downs to choose from. If I didn't explain this correctly or called something wrong, please post it in the comments and I'll change it.

ShareThis