3 May 2008

Using the image input type to post a form in IE

Posted by kilbot | Filed under: Programming

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:


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:


Submit

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;
}