Dynamic <SELECT> fields with php

sammon96

I am looking for some assistance with creating a dynamic <select> field. I am developing a page that I would like to have two drop downs. One drop down will contain something like dates. The other drop down would cotain information depended on the selection made from the first drop down. Thus <select name=two>'s contents will be depended on <select name=one>'s selection.

I have seen examples of this with JavaScript, is there a way to do it with PHP? Also if JavaScript is a must I am curious if anyone has a sample of such a scenario with PHP and JavaScript.

Thanks!

AstroTeg

You're talking about: if user selects item from box A, then list of items in box B change. Right?

This is JavaScript. It all runs on the client-side. Well, its almost all JavaScript. The trick is it depends on how you load the lists. One choice is to pre-fabricate the lists in an array (or arrays). When a user clicks, you drop any content in box B and load it up with content from the array that matches the user's selection. This works great for small and medium lists. But if you have something that is monster-size, then you'll want to look into option two. When the user makes a selection from box A, you have JavaScript go out and submit the request to a script (PHP, JSP, ASP, whatever) and that script returns a JavaScript friendly object. Then your JavaScript code drops any contents in box B and reloads it with the contents from the object you just requested.

Option one is the easier of the two to implement since its pure JavaScript on the client side and not very difficult to setup with PHP. Option two is much more complex requiring a very good understanding of JavaScript. The PHP part is actually not too bad.

For Option one, check out irt.org and their JavaScript FAQs. They have some good, although slightly dated, faqs on form handling. For Option two, look up on google "wddx javascript". WDDX is the mechanics that make option 2 work.

jkurrle

One way to do it is by using a "bounce" page to reflect information back to the orginal page, via GET or POST. Let me give you an example:

Page1.php has the following information:

<?php
$select1=$GET['select1'];
$return="http://".$SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];

echo "
<form method='get' action='/php/bounce.php'>
<input type='hidden' name='return' value=$return'>
<select name='select1'>
<option value='option1'>Option 1</option>
";

if ($select1=="option2")
{
echo "<option value='option2' selected>Option 2</option>";
}
else
{
echo "<option value='option2'> Option 2</option>";
}

echo "
</select>
<input type='submit' value='Change'>
</form>
";

switch($select1)
{
case "option1":
echo "
<form method='post' action='/php/Finish.php'>
<select name='select2'>";
<option value='option3'>Option 3</option>
<option value='option4'>Option 4</option>
</select>
<input type='submit' value='Submit'>
</form>
";
break;

case "option2":
    echo "
    <form method='post' action='/php/Finish.php'>
    <select name='select2'>";
    <option value='option5'>Option 5</option>
    <option value='option6'>Option 6</option>
    </select>
    <input type='submit' value='Submit'>
    </form>
    ";
    break;

default:
    echo "Please Select an option above to continue";
    break;

}
?>

Then, bounce.php is a page that simply grabs the return path and appends configuration information on the end...

<?php
$return=$GET['return'];
$select1=$GET['select1'];
$back=$return."?select1=".$select1;
echo "
<meta http-equiv='refresh' content=0;URL='$back'>
";
?>

Granted, this isn't an elegant solution, but it works...

bpat1434

Another option that doens't require a bounce page is to post the vars to the same page, and then read them through a switch, and display the output.

Here's an example:

Form.php

<?php
if(!isset($_REQUEST['one']) || empty($_REQUEST['menu']) || $_REQUEST['menu'] == 'null'){
    $two = '0';
    $refresh = '0';
}
else{
    $two = $_REQUEST['menu'];
}
?>
<!DOCTYPE ....>
<html>
<head>
<title>Blah Page</title>
<meta tags....>
<?
switch($refresh){
    case 0:
        echo '';
        break;

case 1:
    echo '<meta http-equiv="REFRESH" content="5; URL=somewebsite.com">';
    break;
}
?>
</head>
<body>
<!-- Some style code.... -->
<!-- Whatever else you want -->
<?
switch($two){
    case 0:
        echo '<form name="one" method="POST" onChange="document.one.submit();">'.
          '<select name="menu">'.
          '<option value="null" selected>Please Select an Option</option>'.
          '<option value="1">Option 1</option>'.
          '<option value="2">Option 2</option>'.
          '</select>'.
          '</form>';
        echo '<hr>'; // Separator
        echo '<form name="two" action="nextpage.php" method="POST">'.
          '<select name="menu2">'.
          '</select>'.
          '</form>';
        break;

case 1:
    echo '<form name="one" method="POST" onChange="document.one.submit();">'.
      '<select name="menu">'.
      '<option value="null">Please Select an Option</option>'.
      '<option value="1" selected>Option 1</option>'.
      '<option value="2">Option 2</option>'.
      '</select>'.
      '</form>';
    echo '<hr>'; // Separator
    echo '<form name="two" action="nextpage.php" method="POST">'.
      '<select name="menu2">'.
      '<option value="1">Option 1</option>'.
      '<option value="2">Option 2</option>'.
      '</select>'.
      '<br><input type="submit" value="SUBMIT">'.
      '</form>';
    break;

case 2:
    echo '<form name="one" method="POST" onChange="document.one.submit();">'.
      '<select name="menu">'.
      '<option value="null">Please Select an Option</option>'.
      '<option value="1">Option 1</option>'.
      '<option value="2" selected>Option 2</option>'.
      '</select>'.
      '</form>';
    echo '<hr>'; // Separator
    echo '<form name="two" action="nextpage.php" method="POST">'.
      '<select name="menu2">'.
      '<option value="1">Option 1</option>'.
      '<option value="2">Option 2</option>'.
      '</select>'.
      '<br><input type="submit" value="SUBMIT">'.
      '</form>';
    break;
}
?>
<!-- Finish the HTML page -->
</body>
</html>

That will just refresh the same page and populate the list. You could also use for each loops if you want to use an array like:

<?php
$option1 = new Array("1"=>"Option 1", "2"=>"Option 2");
$option2 = new Array("1"=>"Option 1", "2"=>"Option 2", "3"=>"Option 3");

//** Then you would call it like so: **
case 2:
        echo '<form name="one" method="POST" onChange="document.one.submit();">'.
          '<select name="menu">'.
          '<option value="null">Please Select an Option</option>'.
          '<option value="1">Option 1</option>'.
          '<option value="2" selected>Option 2</option>'.
          '</select>'.
          '</form>';
        echo '<hr>'; // Separator

    echo '<form name="two" action="nextpage.php" method="POST">'.
      '<select name="menu2">'.
      foreach($option2 as $key=>$disp){
          echo '<option value="'.$key.'">'.$disp.'</option>';
      }
      '</select>'.
      '<br><input type="submit" value="SUBMIT">'.
      '</form>';
    break;

I hope I helped and gave you yet another alternative to Javascript or re-posting variables.