Topic: Populate Drop Downs + PHP

[Canuck]

Hi,

I was working on a site of mine and ran into a problem.  I have a drop down menu from which a user can select some items, when that is selected, it populates another drop down list (ie. First one has countries, second one as cities). JavaScript is used to reload the page and the second drop down list.

My problem is this: I do validation through another php file (done through the action on the form). When I select the first option in the dropdown, it reloads the page and starts to process the validation before the user has a chance to select an item from the second drop down.

Anyway I can get around this?

Thanks 

[micah]

not sure how your code looks, but you should come up with some sort of an if/then statement to make sure the user actually submitted the form, instead of just having the page load.

Code: [Select]

<?php
if(isset($_POST['Submit'])){
include('script_that_validates_input.php');
}
?>


[Canuck]

In order to populate the second dropdown the page has to be reloaded..

<select name="league" id="league" onChange="document.forms[0].submit()">

Once the drop down is selected the page is reloaded triggering my validate code



Im thinking AJAX may be the only way around this.

[Mike]

I would do ajax or using PHP to create the JS needed.  The second choice would largely depend on how large the entire data set is.  If it is small it wouldn't be a big deal.

[Canuck]

The dataset will be hockey leagues plus the teams in each league.. I don't think I will have more than 10 leagues, with roughly 30 teams in each.

How would I go about replicating the JS with PHP?

Thanks

[Mike]

Lets say drop down 1 holds the leagues and drop down 2 holds the teams:

Code: [Select]

<?php
echo '
  <select name="league" id="dd1" onchange="changeLeague()">';

foreach ($leagues AS AS $league)
  echo '
    <option value="', $league['id'], '">', $league['name'], '</option>';

echo '
  </select>

  <select name="team" id="dd2">
    <option value="-1">Choose a league!</option>
  </select>

  <script type="text/javascript"><!-- // --><![CDATA[
    function changeLeague()
    {
      var dd2 = document.getElementById("dd2");
      clearOptions(dd2);
      switch(document.getElementById("dd1").value)
      {';

  foreach($leagues AS $league)
  {
     echo '
       case ', $league['id'], ':';

    foreach($league['teams'] AS $id => $name)
      echo '
        addOption(dd2, ', $id, ', "', $name, '");';
  }

  echo '
    }
  }
  function clearOptions(ele)
  {
    while (ele.length)
      ele.remove(0)l
  }
  function addOption(ele, value, text)
  {
    var nextopt = document.createElement("option");
    nextopt.value = value;
    nextopt.text = text;
    ele.add(nextopt, null);
  }
  ]]></script>';