The Kilbot Factory - Web Development and Hosting

I had one of those ‘gotcha’ moments yesterday when testing a contact form I had made for a client. The issue (and fix) is painfully obvious once you see it, but it did leave me scratching my head for about an hour so I thought it was worth writing down.

The form worked as expected in Firefox, Safari and Opera (I develop on a mac), but when I tested in IE 6 & 7 nothing happened – you’d click the submit button but the form would not be processed… a rather serious usability issue you might say.

Turns out the issue was to do with the image input type:

<input type="image" src="path/to/image.gif" name="submit" value="Submit" />

In PHP, I had set my form up to start processing on a $_POST['submit'], however IE will append _x and _y onto the image input giving $_POST['submit_x'] and $_POST['submit_y']. A small change to the PHP code and everything was working fine across all browsers:

// start processing on submit or submit_x
if (isset($_POST['submit']) || isset($_POST['submit_x'])) {
  // run code here
}

It is a little embarrassing to admit that I hadn’t noticed this difference before now, but in my defence I will say that I rarely use the image input type for styling my submit buttons. For sites that contain more than one button, a much better solution is to separate the style from the content. I prefer to use the <button> tag in combination with the <a> tag, eg:

<button>Submit</button>
<a href="#" class="button">Submit</a>

which can then be styled with something like:

button, a.button {
  background: url(path/to/image.gif) no-repeat top left;
  width: 100px;
  height: 40px;
  display: block;
}