input type=image name and value not being sent by ie and opera

Question

There are some similiar questions posted here, but they are too specific.

When a form has multiple image inputs and the server side uses their names and/or values to distinguish which one was clicked it works perfectly in FF and people often write the whole thing before finding out taht HTML specifies nothing has to be sent and some browsers are not sending it.

The question is: What can I do to fix that?

[edit] This really needs clarification. It's not about sending anything, but sending a pair input_name=input_value (I bolded it in the original question)

The best worst-case scenario example here would be what I've encountered: A list of elements all in one form and all accompanied by buttons with name="delete" value="<item_id>"

Answer 1

The problem was half solved up to now: like here

But it didn't allow to get the value!

The correct answer is:

$('input[type=image]')
.unbind('mousedown')
.mousedown(function(){ 
  $(this).after('<input type="hidden" name="'+$(this).attr('name')+'" value="'+$(this).attr('value')+'" />'); 
});

This code creates a hidden duplicate of the input when user starts clicking it. The unbind('mousedown') is to secure it happens once even if You put the code in multiple places in a weird application and it might be called more than once.

I recommend putting it in $(document).ready();

Answer 2

Per the HTML spec, clicking on an IMAGE input will return the parameters:

name.x=x-value and name.y=y-value where "name" is the value of the name attribute

with x-value and y-value corresponding to the click position.

Sure, the server code to deal with this will be a little annoying, but you could just check all the query parameter keys with a regular expression:

/^(.*)\.[xy]$/

to search for the IMAGE input keys to determine which IMAGE was clicked.

Answer 3

I tried with this sample:

<form action="#" method="GET">
  <input type="text" name="t" value="Text here"><br>
  <input type="image" name="a" value="1" src="http://sstatic.net/so/img/logo.png"&gt;&lt;br&gt;
  <input type="image" name="b" value="2" src="http://www.gravatar.com/avatar/c541838c5795886fd1b264330b305a1d?s=32&amp;d=identicon&amp;r=PG"&gt;&lt;br&gt;
</form>

And I get the following urls:

• FF 3.6: x.html?t=Text+here&b.x=19&b.y=17&b=2#
• IE 8: x.html?t=Text+here&b.x=22&b.y=18
• IE 7: x.html?t=Text+here&a.x=185&a.y=51
• Opera 10: x.html?t=Text+here&a.x=107&a.y=53#
• Chrome: x.html?t=Text+here&b.x=20&b.y=17&b=2#

So it seems that all the browsers are sending something image related, even if it isn't the image name directly. Since you need to scan for all the image names that you expect to see you can just scan for imagename.x instead. This seems to be how the spec indicates it should work.

Answer 4

I have had the same problem

http://stackoverflow.com/questions/3139491/request-params-request-form-not-working-in-internet-explorer

Your answer saved me. God bless you.