input type=image name and value not being sent by

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 FireFox. However, people often write the whole thing before finding out that HTML specifies that nothing has to be sent, and thus some browsers are not sending it.

It's not about sending any random object, but sending a pair as input_name=input_value. 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>"

What can I do to fix this problem?

Answer 1

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.

Answer 2

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 3

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 4

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 5

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();