Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts

    Ajax and populating second select field

    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>';


  • #2
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts
    Anyone know?

  • #3
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    google dynamic or cascading dropdown menus


    you'll get a bunch of premade scripts and tutorials

  • #4
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts
    I know some ajax but do I have anything wrong with it.

    Code:
    <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>'

  • #5
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts
    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.

  • #6
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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.

  • #7
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts
    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?
    Last edited by CoolAsCarlito; 02-20-2009 at 09:04 PM.

  • #8
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts
    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;


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •