45

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

4
  • 1
    This code can't submit a thing. Could you write the whole code for the form? Oct 28, 2011 at 22:19
  • 1
    Your input looks fine. What does the server-side code look like? Also the entire form might be helpful. Oct 28, 2011 at 22:20
  • 2
    @Michael Sazonov — Yes it can, that is what image inputs do.
    – Quentin
    Oct 28, 2011 at 22:25
  • 1
    @Quentin - You're right, my mistake. Oct 28, 2011 at 22:27

13 Answers 13

58

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.

5
  • So, what can I use where I can use an image?
    – Satch3000
    Oct 28, 2011 at 22:24
  • Just to clear your question a bit more, are you trying to submit the image itself to the server? Oct 28, 2011 at 22:26
  • No, I have an image as a button (or want to), so if the user clicks this image it adds a value from value="myvalue" and this value will be submitted with the form. So instead of using an input box or a checkbox or other I'm trying to use an image.
    – Satch3000
    Oct 28, 2011 at 22:29
  • 12
    Ok. I don't think that the behaviour of browsers regarding the value in an image input is the same across the board. I would use an input="hidden" to keep the value, that way the user would just see the image and you could be sure that the value would be submitted. Oct 28, 2011 at 22:38
  • input type="image" most certainly carries values to the server, that is the reason for having the image type in the first place. html5 it did lose standardization and its recommended to use an img for an image map, but the functionality remains. using input type image returns x,y coordinates where user clicked the button, where img is the grid surface of the coordinates. won't work in this case, as you are not supposed to use the value="" attribute with input type="image".
    – albert
    May 8, 2019 at 0:25
40

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>
2
  • 5
    If you do this I believe you need to add a border="0" else some browsers might add an ugly bordered window
    – Dynelight
    Apr 10, 2013 at 14:00
  • Actually, add style="border: none;" and this answer is perfect Jul 5, 2023 at 19:23
7

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>
7

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.

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
3

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.

2

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>

1

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

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

0

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.

0

You could use formaction attribute (for type=submit/image, overriding form's action) and pass the non-sensitive value through URL (GET-request).

The posted question is not a problem on older browsers (for example on Chrome 49+).

1
  • 1
    There are other answers that provide the OP's question, and they were posted many years ago. When posting an answer, please make sure you add either a new solution, or a substantially better explanation, especially when answering older questions. Apr 14, 2019 at 9:04
-4

Add this

    name="myvalue"

To your tag.

-8

To submit a form you could use:

<input type="submit">

or

<input type="button"> + Javascript 

I never heard of such a crazy guy to try to send a form using a image or a checkbox as you want :))

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.