Archive for May, 2011

Input type="image" value not present, replaced by x,y coordinates

Thursday, May 19th, 2011

If you're reading this, you may have noticed (as we did) that relying on the value returned from <input type="image"> is breaking your forms. This isn't a bug. It appears to be a new 'feature' in FireFox 4, which actually makes the browser compliant with the HTML 5 standard, instead of the older HTML 4.01 standard.

Check: HTML 4.01 Standard
Check: HTML 5 Standard

The new behavior gives you the X and Y coordinates of where the user clicked on the button element.

1
2
3
<form method="get">
    <input type="image" name="myButton" value="Submit" src="images/submit.gif" />
</form>

Old output:

1
?myButton="Submit"&myButton.x=5&myButton.y=10

New behavior:

1
?myButton.x=5&myButton.y=10

This result is bad if you use images as your "Submit" action and rely on the value of the input to catch the user's intention. For example, you might have an edit and a delete button on a field and your handler changes based on the value of the submit button.

The workaround:

Use CSS like the following on an <input type="submit" /> to give it an image appearance.

1
2
3
4
5
6
7
8
9
input.myClass {
    border: none;
    cursor: pointer;
    display: block;
    text-indent: -3000px;
    background: url(../images/submit.gif) no-repeat 0 0;
    width: 17px;
    height: 11px;
}