Business Interchange Group

Look to the right and you will see images used to select the color theme for our website. I am using $_GET to pass the color selection. There are subtle differences in how browsers will present the $_GET data in the URL. Here's what I started with using Firefox:

<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
<input type="image" name="color" value="gray"
    src="<mt:StaticWebPath>images/user/color-gray.png"
    alt="gray image" title="Click to change style to gray"
    style="width: 25px; height: 25px; padding-right: 5px;" />
...
more <input> with name="color" value="name of color"
...
</form>

In my php routine I used the familiar isset function on $_GET and if set used the key value of 'color' to set the $color variable like so:

if (isset($_GET['color'])) $color = $_GET['color'];

Worked great in Firefox as the URL had the following parameters when clicking the Gray image (notice the color=gray parameter highlighted in red):

/index.html?color.x=12&color.y=11&color=gray

BUT ... Internet Explorer (7 and/or 8) does NOT pass all the same parameters ... Here's the URL with parameters provided by IE (notice the color=gray is not passed, only the coordinates of where I clicked on the image):

/index.html?color.x=12&color.y=18

SO, off to modify the php form handler to accommodate yet another IE interpretation of HTML standards. I renamed each input with its unique color ...

<input type="image" name="gray" value="gray"
    src="<mt:StaticWebPath>images/user/color-gray.png"
    alt="gray image" title="Click to change style to gray"
    style="width: 25px; height: 25px; padding-right: 5px;" />

and the URL looked like this when gray is clicked

/index.html?gray.x=12&gray.y=18

And the php code (note: gray.x will be changed to gray_x in php):

  if (!empty($_GET))
  {
    // Just need to extract the color in the first key in the $_GET array
    $color_keys = (array_keys($_GET));
    // Then remove the _x to just get the color name
    $color = str_ireplace("_x","",$color_keys[0]);
  }