<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>Business Interchange Group - Coding Tips Archives</title>
    <link rel="alternate" type="text/html" href="http://businessinterchangegroup.com/" />
    <link rel="self" type="application/atom+xml" href="http://businessinterchangegroup.com/archives/technology/coding-tips/atom.xml" />
    <id>tag:businessinterchangegroup.com,2009-10-11://41</id>
    <updated>2010-12-10T19:09:49Z</updated>
    <subtitle>Specializing in enhancing your business on the Web</subtitle>
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type Pro 4.32-en</generator>

<entry>
    <title>Using images as input in an HTML form</title>
    <link rel="alternate" type="text/html" href="http://businessinterchangegroup.com/archives/2010/12/using-images-as-input-in-an-html-form.html" />
    <id>tag:businessinterchangegroup.com,2010://41.1465</id>

    <published>2010-12-10T15:56:59Z</published>
    <updated>2010-12-10T19:09:49Z</updated>

    <summary>Learn 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...</summary>
    <author>
        <name>Merv</name>
        <uri>http://BusinessInterchangeGroup.com</uri>
    </author>
    
        <category term="Coding Tips" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Technology" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="_get" label="$_GET" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="form" label="form" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="html" label="html" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="php" label="php" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en" xml:base="http://businessinterchangegroup.com/">
        <![CDATA[<img src="http://businessinterchangegroup.com/assets_c/2010/12/php-thumb-100x74-114.jpg" width="100" height="74" alt="php.jpg" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" />Learn something new every time I try something different and in this case it has everything to do with browser interpretation of standards. Example:<br />
<br/>
<div style="clear: left"></div>
<blockquote>
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:<br />
<br/>
<pre><code>&lt;form action="&lt;?php echo $_SERVER['PHP_SELF'];?&gt;" method="get"&gt;
&lt;input type="image" name="color" value="gray"<br/>    src="&lt;mt:StaticWebPath&gt;images/user/color-gray.png"<br/>    alt="gray image" title="Click to change style to gray"<br/>    style="width: 25px; height: 25px; padding-right: 5px;" /&gt;<br/>...<br/>more &lt;input> with name="color" value="name of color"<br/>...<br/>&lt;/form&gt;</code></pre>

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:<br />
<pre><code>if (isset($_GET['color'])) $color = $_GET['color'];</code></pre>

Worked great in Firefox as the URL had the following parameters when clicking the Gray image (notice the color=gray parameter highlighted in red):<br />
<pre><code>/index.html?color.x=12&color.y=11&<span style="color: red">color=gray</span></code></pre>

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):<br />
<pre><code>/index.html?color.x=12&color.y=18</code></pre>

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 ... <br/>
<pre><code>&lt;input type="image" name="gray" value="gray"<br/>    src="&lt;mt:StaticWebPath&gt;images/user/color-gray.png"<br/>    alt="gray image" title="Click to change style to gray"<br/>    style="width: 25px; height: 25px; padding-right: 5px;" /&gt;<br/></code></pre>
and the URL looked like this when gray is clicked <br />
<pre><code>/index.html?gray.x=12&gray.y=18</code></pre>

And the php code (note: gray.x will be changed to gray_x in php):<br/>
<pre><code>  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]);</code>
  }</pre>
</blockquote>
Now it works the same in both browsers.<br />:-)<br /> <br/>]]>
        
    </content>
</entry>

</feed>

