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 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Radio Buttons with Drop Down Lists

    I am working on a page where users can choose to sort data by:

    name, id#, or color

    I would like the page to work by once a user clicks on a radio button to choose the search criteria (user can only choose one way to search), right next to the radio button a drop down box will allow the user to select the actual name, id# or color and then hit a submit button to go to the next screen. Does anyone know how to do this?

  • #2
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Where would you like the values for the dropdown list to come from?
    When the user clicks the radio button, we'll write a function that then populates the dropdown. But where do we get the values that populate it? Do you have a static list for each option, or did you need it more dynamic?

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The drop down items will come dynamically from a MySQL table and I am using PHP, but am open to using DHTML, Javascript, or whatever else will work.

    PS I like your disclaimer!
    Last edited by skullcats; 12-29-2006 at 12:33 AM.

  • #4
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    This is from an older thing I wrote, but mostly still applies. Browser support for AJAX is a lot better these days. I wrote this before AJAX was popular. It should still work, you can get the idea from here. It uses javascript and PHP.
    ----

    Okay, on to some code (posted code modified from working production code). This example uses PHP to generate nearly everything, including the original selects (state and county). When the user chooses a state, counties are re-populated by combining javascript and PHP.

    This script is in the head of the doc (or, more accurately, in a separate js file and sourced in). It checks for a defined script element and removes it if found. Then it creates a defined script element that has the PHP file that generates the options as a source. Note that the production code also includes object support checks.

    Code:
    function makeCounties(state_id)
       {   var newScript = "dynamicCounties.php?state_id="+state_id;
       var body = document.getElementsByTagName('body').item(0)
       var scriptTag = document.getElementById('countyScript');
       if(scriptTag) body.removeChild(scriptTag);
       script = document.createElement('script');
       script.src = newScript;
       script.type = 'text/javascript';
       script.id = 'countyScript';
       body.appendChild(script);
       }
    Then there is a PHP file (db_include.php, in case you see references to it below) that includes the following functions, among others. (some lines may be broken for display purposes) This code generates my select elements from database rows.

    Code:
    function generateStateSelect()
       {
       $connection = getConnection();
       $db_selected = selectDB($connection);
       $sql = "SELECT state_id, state from states where displaystate=1";
       $result = mysql_query($sql);
       if (!$result) 
          {
          $message = 'Invalid query: ' . mysql_error() . "\n";
          $message .= 'Whole query: ' . $sql;
          die($message);
          }
       $i = 0;
       echo ("<p>State: <select name='state_id' 
              id='state_id' onChange='makeCounties(this.options[this.selectedIndex].value)'>\n");
       echo ("<option value='' selected>-- select one--</option>\n");
       while ($row = mysql_fetch_assoc($result)) 
          {
          echo ("<option value='" . $row['state_id'] . "'>" . $row['state']);
          echo ("</option>\n");
          }
       echo ("</select></p>\n");
       mysql_free_result($result);
       }
    
    function generateCountySelect($state_id)
       {
       $connection = getConnection();
       $db_selected = selectDB($connection);
       $sql = "SELECT county_id, countyname from counties 
               where displaycounty=1 and state_id='" . $state_id . "'";
       $result = mysql_query($sql);
       if (!$result) 
          {
          $message = 'Invalid query: ' . mysql_error() . "\n";
          $message .= 'Whole query: ' . $sql;
          die($message);
          }   $i = 0;
       echo ("<p>County: <select name='county_id' id='county_id'>\n");
       echo ("<option value='' selected>-- select one--</option>\n");
       while ($row = mysql_fetch_assoc($result)) 
          {
          echo ("<option value='" . $row['county_id'] . "'");
          echo (">" . $row['countyname']);
          echo ("</option>\n");
          }
       echo ("</select></p>\n");
       mysql_free_result($result);
       }
    Then we have a file called dynamicCounties.php, which is really meant to be the source of a javascript tag (the function we saw above). It generates the javascript that populates the county select element. And here it is.
    [Note that PHP doesn't need me to set the content-type. If you're using Perl or a servlet, you MUST do this!!]

    Code:
    <?
    // for the dynamic county select box
    // meant to be run as a javascript src!!
    require("./db_include.php");
    $connection = getConnection();
    $db_selected = selectDB($connection);
    $sql = "SELECT county_id, countyname from counties 
    where displaycounty=1 and state_id='" . $state_id . "'";
    $result = mysql_query($sql);
    if (!$result) die;
    echo ("
    var f = document.forms[0].elements['county_id'];
    if (f) 
       {
       f.options.length = 0;                              
       f.options[0] = new Option('--select one--','');");
    $i = 1;
    while ($row = mysql_fetch_assoc($result)) 
       {
       echo ("f.options[".$i."] = new Option('".$row['countyname']."', 
              '". $row['county_id'] . "')\n");
       $i++;
       }
    mysql_free_result($result);
    echo ("}");
    ?>
    And this is the rest you need. A form that uses the script and PHP above, putting it all together.

    Code:
    <form name="f1" action="targetPage.php" 
                    method="get">
    <?
    require("./db_include.php");
    generateStateSelect();
    generateCountySelect('');
    ?>
    <p><input name="submit" type="submit" value="GO!"></p></form>

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/


  •  

    Posting Permissions

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