Cross Browser Compatible Image Submit Buttons
28 Nov2007
Usually, you can keep the design of your interface pretty well separated from the logic behind it. One example where this falls down, however, is in the case where the interface uses image inputs.
The image input type allows the use of an image for a button. They're not really all that popular due to accessibility issues, but this is not an ideal world and sometimes you have to work to a design brief that includes image buttons.
So the catch with these is that Browsers send the name attribute of the button to the server differently. In Firefox, for example, you get three $_POST variables in PHP:
- button_name
- button_name_x
- button_name_y
The x and y are the positions of the button on the page and are (were) used in server side image maps. However Internet Explorer will send only the latter two values:
- button_name_x
- button_name_y
So the safest way to check if a particular button was clicked in your PHP script (or other server side scripting language) is to look for the parameter with the _x or _y appended (in .NET this becomes .x or .y):
The use of both _x and _y here is redundant but I thought I'd just include it for the sake of completeness.
The problem I have with this is that it ties the way the form is being processed to the way the form appears. So my workaround for this is to always use a function to check for the presence of button parameters:
That way you can check which button the user clicked and it won't matter if a later design change adds in image buttons.
This entry was posted on Wednesday, November 28th, 2007 at 3:16 pm author iain dooley, php, recipe, recipes, html, browser compatibility
Subscribe
Building software in the real world - the Working Software blog
We write about our experiences, ideas and interests in business, software and the business of software. We also sometimes write about our own products (in order to promote them).
Recent Posts
- RSS is only dead if we let it die
- Kill your index.php
- 18 Things I Wish I Knew 7 Years Ago
- When does automation become coding
- A list of things you can do to afford Mixergy Premium in 2012
- Thanks Louis now here is my dad
- Your templating engine sucks and everything you have ever written is spaghetti code yes you
- Energy for Opportunity website is now live
- Escaping single and double quotes in XPath queries in PHP
- The reason that outsourcing software is so difficult