Using images as input in an HTML form

php.jpgLearn something new every time I try something different and in this case it has everything to do with browser interpretation of standards. Example:

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]);
  }
Now it works the same in both browsers.
:-)

user-pic

Merv

Specializing in management consulting, marketing, Website/Blogsite development, Movable Type, application of open source software and Activity Based Costing and Pricing for service organizations. Contact us for more information.

1 response to “Using images as input in an HTML form”

  1. user-pic

    Hi Merv, thanks for sharing the codes and guidelines, I am just new in php and html processes and I hope that this one will really boost my knowledge. Thanks and hope to see more of your updates.

Leave a Comment, Question, Inquiry or Reply ...

Some HTML is permitted: a, strong, em

Current Hybrid News Style: Blue-Gray

Follow BIG

rss icon rss comment icon facebook icon linkedin icon twitter icon feedburner icon

Best Wordpress Source

WPMU DEV - The WordPress Experts

get in MOTION

Featured Technology

Requires Flash Player