Ajax and populating second select field

[CoolAsCarlito]

I know this deals with ajax but I don't know how to do it. What this is supposed to do is when a country is chosen from the first dropdown box it's supposed to go back to the database and place all the arenas that have chosen country and grab all of the arenas for that country and fill those in the second dropdown.

PHP Code:

function booklineup() 
{
    print '<script language="JavaScript" src="ts_picker.js"></script>';
    print '<h1 class=backstage>Show Booking Management</h1><br />';
    print '<table width="100%" class="table2">';
    print '<tr>';
    print '<td width="150" valign="center" class="rowheading">Show Name:</td>';
    print '<td class="row3"><select name="show class="dropdown">';
    print '<option value="0">- Select -</option>';
    $query = 'SELECT * FROM shownames';
           $result = mysql_query ( $query );
           while ( $row = mysql_fetch_assoc ( $result ) ) 
          {
           print "<option value=\"".$row['showname']."\">".$row['showname']."</option>\r";
        }
    print '</select></td>';
    print '<td class="row3" width="180"><span class="reduced">Set up in show Name Manager</span></td>';
    print '</tr>';
    print '<tr>';
    print '<td width="150" valign="center" class="rowheading">Label:</td>';
    print '<td class="row3"><input type="text" name="label" class="fieldtext40"></td>';
    print '<td class="row3" width="180"><span class="reduced">e.g. Consecutive Number, Date</span></td>';
    print '</tr>';
    print '<tr>';
    print '<td width="150" valign="center" class="rowheading">Air Date</td>';
    print '<td class="row3"><input type="text" name="bookingdate" class="fieldtext80" value=""><a href="javascript:show_calendar("document.showbooker.bookingdate", document.showbooker.bookingdate.value);"><img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick the date"></a></td>';
    print '<td class="row3"><span class="reduced">dd-mm-yyyy</span></td>';
    print '</tr>';
    print '<tr>';
    print '<td class="rowheading" width="150" valign="center" class="rowheading">No. of Matches:</td>';
    print '<td class="row3"><input type="text" name="numberofmatches" class="fieldtext40"></td>';
    print '<td class="row3"><span class="reduced">More can be added later</span></td>';
    print '</tr>';
    print '<tr>';
    print '<td class="rowheading">Country</td>';
    print '<td class="row3" colspan="2"><select name="countryid" class="dropdown" onchange="ajaxpage("backstageajax.php?random=625094862&routine=arenas&countryid="+showbooker.countryid.value,"arenaajax");"><option value=0>- Select -</option>';
    $query = 'SELECT * FROM arenas';
    $result = mysql_query ( $query );
    while ( $row = mysql_fetch_assoc ( $result ) ) 
          {
           print "<option value=\"".$row['country']."\">".$row['country']."</option>\r";
        }
    print '</select></td>';
    print '</tr>';
    print '<tr>';
    print '<td class="rowheading">Arena</td>';
    print '<td class="row3" colspan="2"><div id="arenaajax"><select name="arenaid" class="dropdown"><option value="0">- Select Arena -</select><input type="hidden" name="location" value="0"></div></td>';
    print '</tr>';
    print '</table><br />';
    print '<input type="submit" value="Add Booking" class="button"><br /><br />';
    print '<input type="button" value="Return to Booking Manager" class="button200"><br /><br />';
    print '<h2 class="backstage"><input type="button" value="Return to Main Menu" class="button200"></form></h2>';
} 


[CoolAsCarlito]

Anyone know?

[ohgod]

google dynamic or cascading dropdown menus


you'll get a bunch of premade scripts and tutorials

[CoolAsCarlito]

I know some ajax but do I have anything wrong with it.

<script type="text/javascript">
function ajaxGet()

{

   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('label').value = xmlHttp.responseText;
         //ajaxGetL();

       }

   }

   //alert("Selected: " + document.getElementById("ajax1").value);

   var names = document.getElementById("names");
   xmlHttp.open("GET","showAjax.php?label=" + names.options[names.selectedIndex].value + "&rand=" + Math.random(),true);

   xmlHttp.send(null);

}
</script>

PHP Code:

<?php

require('database.php');

if(isset($_GET['country']))

{

    $country = mysql_real_escape_string($_GET['country'],$link);

     $query = mysql_query("SELECT `arena` FROM `arenas` WHERE `country` = '".$country."' ORDER BY arena") or die("ERROR 1");
     
    while($list = mysql_fetch_assoc($query))

    {

        echo "<option value=\"".$list['arenas']."\">".$list['arenas']."</option>";

    }

}

?>

PHP Code:

print '<tr>';
    print '<td class="rowheading">Country</td>';
    print '<td class="row3" colspan="2"><select name="countryid" class="dropdown" onChange="ajaxGet();"><option value=0>- Select -</option>';
    $query = 'SELECT * FROM arenas GROUP BY `country` ORDER BY `country`';
    $result = mysql_query ( $query );
    while ( $row = mysql_fetch_assoc ( $result ) )
          {
           print "<option value=\"".$row['country']."\">".$row['country']."</option>\r";
        }
    print '</select></td>';
    print '</tr>';
    print '<tr>';
    print '<td class="rowheading">Arena</td>';
    print '<td class="row3" colspan="2"><div id="arenaajax"><select name="arena" class="dropdown"><option value="0">- Select Arena -</select><input type="hidden" name="location" value="0"></div></td>';
    print '</tr>'; 


[CoolAsCarlito]

I had someone suggest jquery but I still don't know how to change my coding to work with it and improve it since I was also told the way I was doing it was old school.

[ohgod]

jquery or prototype will make the whole ajax thing easier. if you decide to go with prototype i'll be of more use to you. but, there are plenty of folks on here that know jquery.

[CoolAsCarlito]

Which is easier to mess with.

PHP Code:

function booklineup()
{
   print '<script type="text/javascript">';
   // this function waits for the page to load before
// it executes any javascript.  Otherwise the javascript
// will start executing before all the elements are loaded
$(function(){

  // This hooks the "onchange" event of countries select box.
  // Whenever the select box changes, this function will run.
  $("select#country").change(function(){

    // This is jQuery's AJAX method that retrieves
    // a JSON string from a remote URL and parses
    // it into a Javascript object. (in this case, an array)
    $.getJSON(
        // this is the path to the script that will handle the AJAX request
        "/select.php",
        // These are the request parameters we are sending as part
        // of the AJAX request.  Think of them as URL parameters, ie
        // ?this=that&foo=bar.  $(this).val() is a quick way to get
        // the value of the countries select box.
        {country: $(this).val()},
        // this function will execute when the AJAX request returns
        function(arenas){
            // build an HTML string of select options
            var options = '';
            for (arena in arenas) {
                options += '<option value="' + arena + '">' + arena + '</option>';
            }
            // update the arena select box with the new options
            $("select#arena").html(options);
        }
    })
  })
})
   print '</script>';
   $type = $_GET['type'];
   print'<form method=POST name=eventbooker>';
   print'<input type=hidden name=action value=eventbooker>';
   print'<input type=hidden name=routine value=savebooking>';
   print'<input type=hidden name=eventtype value=recurring>';
   print '<h1 class=backstage>Show Booking Management</h1><br />';
   print '<form name="booklineup" method="post" action="backstage.php" id="booklineup">';   
   print '<table width="100%" class="table2">';
   print '<tr>';
   print '<td width="150" valign="center" class="rowheading">Show Name:</td>';
   print '<td class="row3"><select name="showname class="dropdown">';
   print '<option value="0">- Select -</option>';
   $query = "SELECT * FROM shownames WHERE `type` = '$type'";
         $result = mysql_query ( $query );
         while ( $row = mysql_fetch_assoc ( $result ) )
        {
         print "<option value=\"".$row['showname']."\">".$row['showname']."</option>\r";
      }
   print '</select></td>';
   print '<td class="row3" width="180"><span class="reduced">Set up in show Name Manager</span></td>';
   print '</tr>';
   print '<tr>';
   print '<td width="150" valign="center" class="rowheading">Label:</td>';
   print '<td class="row3"><input type="text" name="label" class="fieldtext40"></td>';
   print '<td class="row3" width="180"><span class="reduced">e.g. Consecutive Number, Date</span></td>';
   print '</tr>';
   print '<tr>';
   print '<td width="150" valign="center" class="rowheading">Air Date</td>';
   print '<td class=row3><input type=text name=bookingdate class=fieldtext80>';
   print "<a href=\"javascript:show_calendar('document.eventbooker.bookingdate', document.eventbooker.bookingdate.value);\">";
   print '<img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick the date"></a></td>';
   print '<td class="row3"><span class="reduced">dd-mm-yyyy</span></td>';
   print '</tr>';
   print '<tr>';
   print '<td class="rowheading" width="150" valign="center" class="rowheading">No. of Matches:</td>';
   print '<td class="row3"><input type="text" name="numberofmatches" class="fieldtext40"></td>';
   print '<td class="row3"><span class="reduced">More can be added later</span></td>';
   print '</tr>';
   print '<tr>';
   print '<td class="rowheading">Country</td>';
   print '<td class="row3" colspan="2"><select name="countryid" class="dropdown" onChange="ajaxGet();"><option value=0>- Select -</option>';
   $query = 'SELECT * FROM arenas GROUP BY `country` ORDER BY `country`';
   $result = mysql_query ( $query );
   while ( $row = mysql_fetch_assoc ( $result ) )
        {
         print "<option value=\"".$row['country']."\">".$row['country']."</option>\r";
      }
   print '</select></td>';
   print '</tr>';
   print '<tr>';
   print '<td class="rowheading">Arena</td>';
   print '<td class="row3" colspan="2"><div id="arenaajax"><select name="arena" class="dropdown"><option value="0">- Select Arena -</select><input type="hidden" name="location" value="0"></div></td>';
   print '</tr>';
   print '</table><br />';
   print '<input type="hidden" name="type" value="'.$type.'">';
   print '<input type="submit" value="Add Booking" class="button" name="booklineup"><br /><br />';
   print '<input type="button" value="Return to Booking Manager" class="button200"><br /><br />';
   print '<h2 class="backstage"><input type="button" value="Return to Main Menu" class="button200"></form></h2>';
} 


How does this look so far?

[CoolAsCarlito]

I have that as well as this code:

PHP Code:

<?php
 
$country = $_REQUEST['country'];
 
$country = mysql_real_escape_string($country, $link);
$query = mysql_query("SELECT `arena` FROM `arenas` WHERE `country` = '".$country."' ORDER BY arena") or die("ERROR 1");
 
$arenas = array();
while($row = mysql_fetch_assoc($query)) {
    $arenas[] = $row['arena'];
}
 
header('Content-type: application/json');
echo json_encode($arenas);
exit;