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

Question

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 FireFo

Answer 1

Using the type="image" is problematic because the ability to pass a value is disabled for some stupid lack of reason. Anyways & although it's not as customizable & thus as pretty, you can still use you images so long as they are part of a type="button".

<button type="submit" name="someName" value="someValue"><img src="someImage.png" alt="SomeAlternateText"></button>

Answer 2

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 3

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 4

I think I am/was having a similar problem. I wanted to click on an thumbnail and have it enlarged on a different page. I was trying to do this with PHP alone but I finally had to use the tag with the . Worked great for FF3 and safari but the INPUT IMAGE values did not post for IE9 or FF9. My work around was to put each image in its own form and then also use a hidden input to send the needed data.

<table>
   <tr>
     <td>
        <form method="post" class="form_photo">
            <input type="image" name="img_photo" value="does nothing in IE9 or FF9" />
            <input type="hidden" name="photo" value="nameoftheimage.jpg" />
        </form>
        <form method="post" class="form_photo">
           <input ...>
           <input ...>
        </form>
        <form> ...
  </td>
</tr>

Then I discovered the forms displayed vertical, making it very odd. CSS to the rescue.

.form_photo { display:inline; }

seems to have solved the vertical problem. Now the user can click on the thumbnail and the value now passes in all the browsers I have access to testing.

Answer 5

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"><br>
  <input type="image" name="b" value="2" src="http://www.gravatar.com/avatar/c541838c5795886fd1b264330b305a1d?s=32&d=identicon&r=PG"><br>
</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.