Input Type image submit form value?

I am using this code to try and submit a value via form but it doesn't seem to submit anything...

I would normally use a checkbox or Radio buttons for multiple options but I want to use an image to do this.

Is this code wrong?

<input id="test1" name="test1" type="image" src="images/f.jpg" value="myValue" alt="" />

So I want to pass the value in value="myValue".

The form works fine so that's not the problem, I just need help with the input part not submitting as I know that works.

Thanks

Solution 1:

An input type="image" only defines that image as the submit button and not as an input that can carry over a value to the server.

Solution 2:

Using the type="image" is problematic because the ability to pass a value is disabled. Although it's not as customizable and thus as pretty, you can still use your images ao long as they are part of a type="button".

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

Solution 3:

I was in the same place as you, finally I found a neat answer :

<form action="xx/xx" method="POST">
  <input type="hidden" name="what you want" value="what you want">
  <input type="image" src="xx.xx">
</form>

Solution 4:

I've found that image-buttons DO return a response, but you should NOT use a value-option. What I see returned are two version of the name="MYNAME" with .X and .Y endings.

For example:

<input type="image" src="/path-to/stop.png" name="STOP" width="25" height="25" align="top" alt="Stop sign">

This is within your <form> to </form>. If you click the image, what's returned are STOP.X and STOP.Y with numeric values. The existence of either indicates the STOP image-button was clicked. You don't need any special code. Just treat it as another kind of "submit" button that returns a pair of augmented NAMEs.

I've tried this on Safari, Firefox and Chrome. The image wasn't displayed with Safari, but where it was supposed to be located, my cursor turned into a finger-icon, and I could click it.

Solution 5:

Some browsers (IIRC it is just some versions of Internet Explorer) only send the co-ordinates of the image map (in name.x and name.y) and ignore the value. This is a bug.

The workarounds are to either:

Have only one submit button and use a hidden input to sent the value
Use regular submit buttons instead of image maps
Use unique names instead of values and check for the presence of name.x / name.y