Drop Down Menu using PHP Switch/Case Breaks CSS

Question

My newest website Preventions (opening October 29) features a Glossary page. The objective is to use any of the drop-down menus to show more information about one of the terms I use for my newest basketball metric.

There is one big problem: every time I use the drop-down menu to switch to that page, the CSS and all associating images get broken. The result becomes a style-less page. Not even debugging through the Firebug feature works.

Here is a direct link to the page in question: http://preventions.wammyradio.com/glossary

Instructions: simply go to the Points Preventions drop-down menu and select "Shot Contest." This is the only link I've fully prepared since I've yet to implement the rest of the links on that page.

All of the drop-down menu write-ups will look like the one you see below. Please disregard the escape quotes, I've tried this both within PHP scripts and outside of PHP as pure HTML:

<FORM>
<SELECT onChange=\"location=this.options[this.selectedIndex].value;\">
 <OPTION selected class=\"Title\">Point Preventions</OPTION>
 <OPTION value=\"glossary/shotcon\">Shot Contest</OPTION>
 <OPTION value=\"shotblk\">Shot Block</OPTION>
 <OPTION value=\"shotstl\">Shot Steal</OPTION>
 <OPTION value=\"shotoff\">Shot Charge</OPTION>
 <OPTION value=\"shotvoid\">Shot Void</OPTION>
</SELECT></FORM>

Here, as of now, is the only code that uses PHP. Please ignore the break command, as this will most likely be removed from the site:

$term = $_GET['term'];

switch ($term) {
    case "shotcon":
        include('dictionary/shotcon.txt');
        break;
    default:
        break;
}

How can I revise my drop-down menu so that when the page refreshes once I select an option, the CSS is unharmed?

EDIT

Thanks to Tom Hoang for providing me with a workaround. But now, a new issue has arisen. While I was fine tuning and testing the code, I noticed that none of the links past "Shot Contest" were working. But if I chose "Shot Contest" first, then select another option afterword, the action would work as requested. I did not notice this until then, but the script does look for the URL "preventions.wammyradio.com/glossary/glossary/term." So apparently, every time the menu is used to access a term, the drop-down menu tacks on another "glossary/" to the end of the URL.

Strangely, if I changed the affected line to look like this:

<OPTION value=\"shotcon\">Shot Contest</OPTION>

And I selected this or any other option, none of the options will work.

I need to find a way to rewrite the URL so that it doesn't do this. I'll look into my coding further, but I think if Tom's workaround can be done for the style, JS file and logo image, then there is definitely a code that can trim or tack on the "glossary" directory properly.

The URL is still available to demo.

Answer 1

Add method="GET" to your form tag.
Add name="term" to your select tag.

e.g. < FORM method="GET">
< SELECT name="term" onChange=\"location=this.options[this.selectedIndex].value;\">

I assume you want it to look like this: http://preventions.wammyradio.com/glossary?term=shotcon

EDIT

$term = $_GET['term'];
if($term != '')
    $style = "../style.css";
else
    $style = "style.css";

then when adding the stylesheet in the html,

<link rel="stylesheet" type="text/css" href="<?php echo $style; ?>">

EDIT2

It seems if there is a term, ignore the glossary/ part of the option value. If the term is missing, include the glossary/ part to the option value.

$term = $_GET['term'];
if($term != '')
{
    $style = "../style.css";
    $dropdowns = '
     <table id="GlossaryBanner"><tbody><tr>
       <td align="center">
        <form method="GET">
          <select name="term" onchange="location=this.options[this.selectedIndex].value;">
            <option selected="" class="Title">Point Preventions</option>
            <option value="shotcon">Shot Contest</option>
            <option value="shotblk">Shot Block</option>
            <option value="shotstl">Shot Steal</option>
            <option value="shotoff">Shot Charge</option>
            <option value="shotvoid">Shot Void</option>
         </select>
       </form>
     </td>
     <td align="center">
       <form>
         <select onchange="location=this.options[this.selectedIndex].value;">
           <option selected="" class="Title">Possession Preventions</option>
           <option value="posstl">Possession Steal</option>
           <option value="posoff">Possession Charge</option>
           <option value="posvoid">Possession Void</option>
           <option value="posclk">Possession Clock</option>
           <option value="posorb">Possession Rebound</option>
         </select></form>
     </td>
     <td align="center">
       <form>
         <select onchange="location=this.options[this.selectedIndex].value;">
           <option selected="" class="Title">Assist Preventions</option>
           <option value="aststl">Assist Steal</option>
           <option value="astoff">Assist Charge</option>
           <option value="astvoid">Assist Void</option>
         </select>
       </form>
     </td>
     <td align="center">
       <form>
         <select onchange="location=this.options[this.selectedIndex].value;">
           <option selected="" class="Title">Other</option>
           <option value="screen">Screen / Pick</option>
           <option value="setup">Set-up / Hockey Assist</option>
           <option value="save">Possession Save</option>
           <option value="delayblk">Shot Block Delay</option>
           <option value="delaydef">Deflection Delay</option>
           <option value="delayjmp">Jump Ball Delay</option>
           <option value="help">Help (Tally)</option>
           <option value="foul">Foul (Tally)</option>
           <option value="assign">Assignment (Tally)</option>
         </select>
       </form>
     </td></tr></tbody></table>';
}
else
{
    $style = "style.css";
    $dropdowns = '
     <table id="GlossaryBanner"><tbody><tr>
       <td align="center">
        <form method="GET">
          <select name="term" onchange="location=this.options[this.selectedIndex].value;">
            <option selected="" class="Title">Point Preventions</option>
            <option value="glossary/shotcon">Shot Contest</option>
            <option value="glossary/shotblk">Shot Block</option>
            <option value="glossary/shotstl">Shot Steal</option>
            <option value="glossary/shotoff">Shot Charge</option>
            <option value="glossary/shotvoid">Shot Void</option>
         </select>
       </form>
     </td>
     <td align="center">
       <form>
         <select onchange="location=this.options[this.selectedIndex].value;">
           <option selected="" class="Title">Possession Preventions</option>
           <option value="glossary/posstl">Possession Steal</option>
           <option value="glossary/posoff">Possession Charge</option>
           <option value="glossary/posvoid">Possession Void</option>
           <option value="glossary/posclk">Possession Clock</option>
           <option value="glossary/posorb">Possession Rebound</option>
         </select></form>
     </td>
     <td align="center">
       <form>
         <select onchange="location=this.options[this.selectedIndex].value;">
           <option selected="" class="Title">Assist Preventions</option>
           <option value="glossary/aststl">Assist Steal</option>
           <option value="glossary/astoff">Assist Charge</option>
           <option value="glossary/astvoid">Assist Void</option>
         </select>
       </form>
     </td>
     <td align="center">
       <form>
         <select onchange="location=this.options[this.selectedIndex].value;">
           <option selected="" class="Title">Other</option>
           <option value="glossary/screen">Screen / Pick</option>
           <option value="glossary/setup">Set-up / Hockey Assist</option>
           <option value="glossary/save">Possession Save</option>
           <option value="glossary/delayblk">Shot Block Delay</option>
           <option value="glossary/delaydef">Deflection Delay</option>
           <option value="glossary/delayjmp">Jump Ball Delay</option>
           <option value="glossary/help">Help (Tally)</option>
           <option value="glossary/foul">Foul (Tally)</option>
           <option value="glossary/assign">Assignment (Tally)</option>
         </select>
       </form>
     </td></tr></tbody></table>';
}

Then include the $dropdowns variable in the appropriate place with

<?php echo $dropdowns; ?>