Cross Browser Compatible Image Submit Buttons

28th November, 2007Insights

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):

if(isset($_POST['button_name_x']) || isset($_POST['button_name_y']))
    //your button was clicked

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:

function buttonClicked($name)
{
    $ret = FALSE;

    if(isset($_POST[$name]) OR isset($_POST[$name.'_x']) OR 
       isset($_POST[$name.'_y']))
        $ret = TRUE;

    return $ret;
}

if(buttonClicked('add_user'))
    //do whatever you want

That way you can check which button the user clicked and it won’t matter if a later design change adds in image buttons.

Read More Posts

BYOD and Cybersecurity: An In-Depth Analysis

BYOD and Cybersecurity: An In-Depth Analysis

Bring Your Own Device (BYOD) policies have become increasingly prevalent in Australian businesses, offering flexibility and cost savings. However, they also introduce complex cybersecurity challenges. In this article, we explore the cybersecurity implications of BYOD...

Using a Second Phone Number for Personal Use: Benefits and Risks

Using a Second Phone Number for Personal Use: Benefits and Risks

In today's connected world, balancing personal and professional life is more challenging than ever. One solution gaining popularity is the use of a second phone number for personal use. This approach, especially with solutions like BenkoPhone, offers several benefits...

Want to try BenkoPhone?