Working Software If it works, it must be Working Software

Cross Browser Compatible Image Submit Buttons (28 November 2007)

by Iain Dooley | Permalink

explore : HTML, PHP, Home Page, Browser Compatibility

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'])ORisset($_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.

• Add Comment