PHP drop down which each are dependable

Question

Hi all,

I have this problems. using html and php.

May I know how to do this. I have 2 drop down, eg A and B. Drop down B is depend to the drop down A. Example, A have these options which will be called from dbase(no prob with this, tq) (Jack, Carol), and B wil have options depend on A: if select Jack(T1, T2, T3), if select carol(T1,T2,T3,T4,T5).

Here are the sample interface.

Can someone help me with this?

thank you.

Answer 1

U need to Work with Ajax In this Case. Without Refreshing the Page Selecting any of the A column will give u corresponding B column Value. For Example

<form method="post" name="form1">
 <table border="0" cellpadding="0" cellspacing="0" width="60%"><tbody>
  <tr>
   <td width="150">Country</td>
   <td width="150"><select style="background-color: #ffffa0" name="country" onchange="getState(this.value)"><option>Select Country</option><option value="1">USA</option><option value="2">Canada</option>       </select></td>
  </tr>
 <tr>
  <td>State</td>
  <td>
  <p id="statediv">
  <select style="background-color: #ffffa0" name="state"><option>Select Country First</option>       </select></td>
</tr>
<tr>
  <td>City</td>
  <td>
  <p id="citydiv">
  <select style="background-color: #ffffa0" name="city"><option>Select State First</option>       </select></td>
</tr>
</tbody></table>
</form>

As you can see above, in the onChage event of the country drop down getState() function of the javascript is called which change the options values the State drop down, let’s look at the code the getState() function.

function getState(countryId)
{
   var strURL="findState.php?country="+countryId;
   var req = getXMLHTTP();
   if (req)
   {
     req.onreadystatechange = function()
     {
      if (req.readyState == 4)
      {
     // only if "OK"
     if (req.status == 200)
         {
        document.getElementById('statediv').innerHTML=req.responseText;
     } else {
       alert("There was a problem while using XMLHTTP:\n" + req.statusText);
     }
       }
      }
   req.open("GET", strURL, true);
   req.send(null);
   }
}

The code of the PHP file findState.php, which populate the options in the drop down of the state which is fetched from Ajax , is given below

<? $country=intval($_GET['country']);
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_ajax');
$query="SELECT id,statename FROM state WHERE countryid='$country'";
$result=mysql_query($query);

?>
<select name="state" onchange="getCity(<?=$country?>,this.value)">
 <option>Select State</option>
  <? while($row=mysql_fetch_array($result)) { ?>
    <option value=<?=$row['id']?>><?=$row['statename']?></option>
  <? } ?>
</select>

In the above state dropdown, getCity() function is called in onChage event with countryId and stateId parameter, now let’s look at the code of the getCity() function

function getCity(countryId,stateId)
{
  var strURL="findCity.php?country="+countryId+"&state="+stateId;
  var req = getXMLHTTP();
  if (req)
  {
    req.onreadystatechange = function()
    {
      if (req.readyState == 4) // only if "OK"
      {
        if (req.status == 200)
        {
          document.getElementById('citydiv').innerHTML=req.responseText;
        } else {
          alert("There was a problem while using XMLHTTP:\n" + req.statusText);
        }
      }
    }
    req.open("GET", strURL, true);
    req.send(null);
  }
}

In the above ajax function, findcity.php is called and this PHP file populate the city dropdown according to the supplied parameters country and state from get method. Now let’s look at the code of findcity.php,

<?php $countryId=intval($_GET['country']);
$stateId=intval($_GET['state']);
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_ajax');
$query="SELECT id,city FROM city WHERE countryid='$countryId' AND stateid='$stateId'";
$result=mysql_query($query);

?>
<select name="city">
 <option>Select City</option>
  <?php while($row=mysql_fetch_array($result)) { ?>
 <option value><?=$row['city']?></option>
<?php } ?>
</select>

And thats all, the triple drop down list of city, country and state using Ajax and PHP will be populated.

Answer 2

Ajax is "cool" thing right now so everyone is going to say use ajax. I'm going to say you don't NEED ajax. An alternative would be to disable the second form. When the first select is submitted/changed the page reloads adding something to the querystring e.g. ?a=jack and the second select is populated with the correct values.

Now any pages linking to ?a=jack will automatically populate the second select, when with ajax youd have to write even more javascript code.

I'm not saying don't use ajax, im just giving a different, most likely easier alternative.

Only use ajax when it really helps the user experience.

Answer 3

You will need Ajax bound to the onClick of Drop Down A that is set to populate the inner HTML of Drop Down B

Answer 4

ONE way to do it if you absolutely do not want to use jQuery nor javascript:

<form action="?step=2" method="post">
<select name="name">
    <option if($_POST['name'] == 'Jack'){echo ' selected="selected" ';}>Jack</option>
    <optionif($_POST['name'] == 'Carol'){echo ' selected="selected" ';}>Carol</option>
</select>

<?php if($_GET['step'] == 2){?>
<select name="b">
<option>1</option>
<option>2</option>
<option>3</option>
<?php if($_POST['name'] == 'Carol'){?>
<option>4</option>
<option>5</option>
<?php } ?>
</select>
</form>
<?php } ?>

<input type="submit" name="next" value="Next" />

You will have to breack the form/page into steps. And the whole form needs to be re-populated as the pages are reloaded.

Hope this can be of assistance to you