Jump to content

dropdown menu ajax


justinh

Recommended Posts

Okay I'm trying to write some ajax that updates dropdownmenu B based on what is selected in dropdownmenu A.

 

I found a tutorial and tried my best to follow it, but I'm not the one to just copy and paste something and call it done, I like to understand how it works.

 

Heres the code from the form page.

<html>
<head>
<script type="text/JavaScript">

var xmlHttp;
function createXMLHttpRequest(){
    if (window.ActiveXObject){
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                        else if (window.XMLHttpRequest){
                                    xmlHttp = new XMLHttpRequest();
                                        }
}

function doIt(dd1) {
     var idx = dd1.selectedIndex;
     var val = dd1[idx].text;
     var par = document.forms["addentry"];
     var parelmts = par.elements;
     var varcountry = parelmts["country"];

          createXMLHttpRequest();
          xmlHttp.onreadystatechange = handleStateChange(varcountry);
          xmlHttp.open("GET", "/Agents/templates/testings.pl?region=" + val , true);
          xmlHttp.send(null);
}


function handleStateChange(countryelmt){

     if (xmlHttp.readyState == 4){
      if(xmlHttp.status == 200){
        var countri = xmlHttp.responseText;
        var countries = countri.split("|");
        countryelmt.length = 1;
       countryelmt.length = countries.length;
        for(o=1; o < countries.length; o++){
            countryelmt[o].text = countries[o];
            }
}
}
}

            
                                                                                                                                                                                                                                          </script>
</head>
<div id="content">
<p class="contentheader">Add Entry</p>
<div id="content">
<div id="spitout"></div>
<form name="addentry" id="addentry" method="POST" action="http://www.cwwebapps.craneww.com/Agents/index2.pl?display=add_entry&insert=1">
<Fieldset>
<legend>Add Entry</legend>

<ol><li>
<label for="entrytype">Entry Type</label> <select name="entrytype"> 
                   <option value="gln">GLN</option>
                   <option value="agent">Agent</option>
                   <option value="crane">Crane</option>
                   </select></li>
                   
<li>
<label for="region">Region</label> <select name="region" onchange="doIt(this);">

            <option value="">Select Region</option>
            
            <option value="EMEA">EMEA</option>
            
            <option value="LATAM">LATAM</option>
            
            <option value="ASPAC">ASPAC</option>
            
            <option value="NORTAM">NORTAM</option>
            
            <option value="CENTAM">CENTAM</option>

            
            </select>
            </li>
            <li>
            <label for="country">Country</label><select name="country">
            <option value="">Select Country</option>
            
            </select>
            </li>
            </ol>

            </fieldset>
            <fieldset class="submit">
            <input class="submit" type="submit" value="Add">
            </fieldset>
            </form>

 

 

and heres the code to testings.pl ( the page the ajax calls to)

 

#!/usr/bin/perl -w
use strict;
use CGI;
use DBI;.
my $cgi = CGI->new();
print $cgi->header();

my $region = $cgi->param('region');
my $dbh = DBConnect();
my $query = "SELECT DISTINCT country from stations WHERE region =\"". $region."\"";
my $sth = $dbh->prepare($query);
$sth->execute();
while( my $ref = $sth->fetchrow_hashref()){
    print $ref->{country}."|";
}

sub DBConnect {

my $db = shift || "agent_info";
my $dn = "DBI:mysql:$db";
my $dbh = DBI->connect($dn, "*****", "******") or die("Error connecting to Database:" . $DBI::errstr);
            }

 

Now I have tested just the xmlHttp.responseText to see if its the output not coming out right, but it prints out just fine every time i change the dropdownmenu A. So that's working, just can't get it to add into dropdownmenu B.

 

Any help would be greatly appreciated.

 

Thanks

Link to comment
https://forums.phpfreaks.com/topic/171982-dropdown-menu-ajax/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.