Jump to content

What is the best way to display specific info from a table?


kemper

Recommended Posts

I am hosting a youth sport site and I want to display schedules by select teams.

 

I thought that I would want a drop down menu to select one of our 35 divisions, then a secondary search by team of that previously selected division menu.

 

My schedule is in a table with the fields:

* division

* date

* time

* home_team

* h_score

* visiting_team

* v_score

* field

 

I see problems, since secondary drop down menu would have to search two different fields.  Any suggestions and hint to where I would even start?

 

Thanks!

 

Kemper

Maybe I'm not understanding the issue but it seems fairly straitforward to me:

$sql = "
     SELECT *
     FROM schedule_table
     WHERE division = '{$_POST['division']}'
        AND ( home_team = '{$_POST['team']}' OR visiting_team = '{$_POST['team']}' )";

 

That will select all records from the table where the division matches the division selected AND the home team or the visiting team match the team selected.

I understand that part, but how do you suggest I populate the team selection?

 

I have 35 divisions with over 300 team to select from.  It cannot be by team name alone, since there are quite a few teams from several clubs and they use the same name.  I would like to give my visitors easier time locating their schedules.

 

What is the best option for visitors to create the WHERE variables?

Ok, so you want the team select field to only be populated with the teams for the selected division. Well, there are two different approaches: PHP or Javascript

 

1) With PHP you would first give the user the option to select the division. Then you could either have the manually submit the page or auto-submit with Javascript. Whent he page is submitted you would do a query for all the teams that exist i the division and then return the user back tot he form with the correctly populated team list.

 

2) Using javascript you can dynamically change the contents of the team list every time the user makes a change in the division list without having to do a page refresh.

 

Every situation is different, but for "moderately" short lists I prefer to use the Javascript method as it is quicker and less obtrusive tot he end user. For very big lists the overhead for the user's machine can be an issue so a server-side solution may be in order. For your situation, I would go with Javascript. However, there is a catch. If the user does not have Javascript enabled (rare, but there are some) then you could run into problems.

 

I would simply populate the entire team list and then repopulate accordingly using javascript. That way a user w/o Javascript will have a list of all the teams. Of course, they would also have the ability to selecta a team & division that don't exist together.

 

Here is a Javascript example:

<html>
<head>

<script type="text/javascript">


// State lists
var states = new Array();

  //Canada States
  states[0] = new Array('Alberta','British Columbia','Ontario');
  //Mexico States
  states[1] = new Array('Baja California','Chihuahua','Jalisco');
  //US States
  states[2] = new Array('California','Florida','New York');


// City lists
var cities = new Array();
  cities[0] = new Array();
  cities[0][0] = new Array('Edmonton','Calgary');
  cities[0][1] = new Array('Victoria','Vancouver');
  cities[0][2] = new Array('Toronto','Hamilton');

  cities[1] = new Array();
  cities[1][0] = new Array('Tijauna','Mexicali');
  cities[1][1] = new Array('Ciudad Juárez','Chihuahua');
  cities[1][2] = new Array('Guadalajara','Chapala');

  cities[2] = new Array();
  cities[2][0] = new Array('Los Angeles','San Francisco');
  cities[2][1] = new Array('Miami','Orlando');
  cities[2][2] = new Array('Buffalo','new York');


function setStates(){

  cntrySel = document.getElementById('country');
  stateSel = document.getElementById('state');
  stateList = states[cntrySel.selectedIndex];

  changeSelect(stateSel, stateList);
  setCities();

}

function setCities(){

  cntrySel = document.getElementById('country');
  stateSel = document.getElementById('state');
  citySel  = document.getElementById('city');
  cityList = cities[cntrySel.selectedIndex][stateSel.selectedIndex];

  changeSelect(citySel, cityList);

}

function changeSelect(field, arrayVals) {
  field.options.length = 0;
  for (i=0; i<arrayVals.length; i++) {
    field.options[field.length] = new Option(arrayVals[i],arrayVals[i]);
  }
}

</script>

</head>

<body onload="setStates();">
<form name="test" method="POST" action="processingpage.php">

Country: 
<select name="country" id="country" onchange="setStates();">
  <option value="Canada">Canada</option>
  <option value="Mexico">Mexico</option>
  <option value="United States">United States</option>
</select>
<br>

State: 
<select name="state" id="state" onchange="setCities();">
  <option value="">Please select a Country</option>
</select>
<br>

City: 
<select name="city"  id="city">
  <option value="">Please select a Country</option>
</select>
</form>
</body>
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.