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;
}
  • http://private... Bazz

    WOW Thanks SO MUCH for this advise – I had spent hours and hours battling this and your the only one out of dozens of web pages to suggest a fix – and it worked a treat!
    Thanks you so so much…

  • http://www.greenpeace.ca MartinB

    You make my day as well here : I never ran into this one single issue. I have always assumed when coding php that server-side code was client-independent. Thrust Internet Explorer to defy this assumption, right…?

    Microsoft strikes again!

    Thanks for your posts, it was super useful!

  • http://www.zywiecusa.com marcin

    I had the same problem and you solved it!!!

    There something I don’t understand though. Why IE would add _x or _y to the input name? When to expect _x and when _y?

  • Chilli

    Thank You Very Much

    … to the KILBOT Factory

    You are doing a Great Job of helping the Developer Community..

    Kindly Keep up the good work.

  • Antony

    LOL – I just figured this same problem out myself after about 2 hours then stumbled across your article, wish i’d seen it first LOL :-)

    Thanks for publishing none the less.

  • mike

    I am having this problem right now. I made a personal site that has some user interaction (comments, ratings, etc) and for the off chance that someone actually stumbles on my site and interacts with it an email is automatically sent to it. Well, sure enough, yesterday someone used IE and my email notice had the _y at the end. For the last few minutes I’ve been debugging and noticed that when I do print_r($_POST) IE doesn’t print the value of the input (which, in my input’s case, is 1). It looks like this: Array ( [dog_x] => 15 [dog_y] => 12 ) but in FF it looks like this: Array ( [dog_x] => 13 [dog_y] => 12 [dog] => 1 ). Long story short, I’m changing those buttons to css stylized anchors. Thanks for the sanity check.

  • mike

    “an email is automatically sent to me”, not “it”. Sorry.