Firefox 4 change: input type image only submits x and y, not name when clicked. Keyboard as before
Posted on: Friday, July 30th, 2010 at 11:41 am
(This post is partly a note to self, and a place to further describe the Firefox bug I raised.)
Update: “not a bug, it’s a feature”! See below for more, but the gist of it is that Firefox’s behaviour here is right according to the HTML 5 specs, but not according to the HTML 4.01 specs…
The problem change
Firefox 4.0 beta — as well as IE and Opera — do not send name/value for input type=”image”; only .x and .y coordinates are sent.
Note, this is when clicking the input image with a mouse. When navigating using keyboard, focusing on it, and pressing enter, then the name does get submitted.
Earlier Firefox, Chrome (latest) do send name/value, which is what we’d expect…
Example
This form submits using a GET so you can see the submitted name/value pairs in the querystring:
What does W3C spec say?
17.4.1 Control types created with INPUT says this for input type image:
When a pointing device is used to click on the image, the form is submitted and the click coordinates passed to the server. The x value is measured in pixels from the left of the image, and the y value in pixels from the top of the image. The submitted data includes name.x=x-value and name.y=y-value where “name” is the value of the name attribute, and x-value and y-value are the x and y coordinate values, respectively.
The previous quote implies name=value should not be sent for input type=image
But 17.4 The Input Element says this as part of the input name attribute formal definition:
name CDATA #IMPLIED -- submit as part of form --That implies the name should be submitted too, even for input type=image (and assuming that, then the value of the input should be submitted too, which seems to be confirmed by section 17.13.2 Successful controls in the spec, which notes: A successful control is “valid” for submission. Every successful control has its control name paired with its current value as part of the submitted form data set.
)
So, I think Firefox 4 has introduced a bug…?
Update: not a bug
The bug I raised has been updated and turns out that this is per HTML 5 spec, while I was comparing what I saw with the implementations in earlier versions of Firefox and with the HTML 4.01 spec…
IE (and Opera) also only send .x and .y, so I guess they settled on that given most sites are probably still catered for/assume IE as the predominant browser…
Workarounds
One possible workaround is this, but ugly:
- Detect the browsers to do this for (feature detection would be better…)
- Capture the form submit event and find the button that caused this, or capture the button click event
- Append a hidden input like this (jQuery example, assuming button is the button you have captured):
$(form).append('<input type="hidden" name="' + button.name + '" value="' + button.name + '" />').submit();
If you’ve already been working around this for IE, as the problem has been there for ages, then apply this for firefox 4 too (annoying and ugly to do browser specific code, I know)
Third workaround: don’t use input type=image, use input type=submit + CSS, or button etc.
On July 30th, 2010 at 1:54 pm Anup Shah said :