Ndtyjky

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>

Hope this helps! ^_^

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>

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.

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
  

Here is what I was trying to do and how I did it. I think you wanted to do something similar.
I had a table with several rows and on each row I had an input with type image. I wanted to pass an id when the user clicked that image button. As you noticed the value in the tag is ignored. Instead I added a hidden input at the top of my table and using javascript I put the correct id there before I post the form.

<input type="image" onclick="$('#hiddenInput').val(rowId) src="...">

This way the correct id will be submitted with your form.

You could use a radio button/checkbox and set it to hide the button in css and then give it a label with an image.

input[type="radio"] {display: none}

input[type="radio"] + label span {display: block}

Then on the page:

<input type="radio" name="emotion" id="mysubmitradio" />

        <label for="mysubmitradio"><img src="images/f.jpg" />

    <span>if you need it</span></label>

And then set it to submit using javascript:

document.forms["myform"].submit();

Solution:

<form name="frmSeguimiento" id="frmSeguimiento" method="post" action="proc_seguimiento.php">  

    <input type="hidden" name="accion" id="accion"/>





<input name="save" type="image" src="imagenes/save.png" alt="Save" onmouseover="this.src='imagenes/save_over.png';" onmouseout="this.src='imagenes/save.png';" value="Save" onclick="validaFrmSeguimiento(this.value);"/>





function validaFrmSeguimiento(accion)

{

    document.frmSeguimiento.accion.value=accion;



}

Regards,
jp

Inputs of type="image" don't send their name/value pair when used to submit the form. To me, that sounds like a bug, but that's how it is.

To get around this, you can replace the input with a button of type="submit", and put a img element inside.

Unfortunately, that causes your image to be in a ugly HTML "button". However, assuming you aren't using the standard HTML button anywhere, you can just override the stylesheet, and then everything should work as expected:

button, input[type="submit"], input[type="reset"] {

	background: none;

	color: inherit;

	border: none;

	padding: 0;

	font: inherit;

	cursor: pointer;

	outline: inherit;

}

<form action="/post">

<input name="test">

<button type="submit" name="submit_button" value="submitted">

<img src="https://via.placeholder.com/32" alt="image">

</button>

</form>

well if i was in your place i would do this.I would have an hidden field and based on the input image field i would change the hidden field value(jQuery), and then finally submit the hidden field whose value reflects the image field.

Add this

    name="myvalue"

To your tag.