submitting form on image click

Question

I have multiple images inside one form. Depending on the image clicked a specific value should be sent with a POST.

Can this be done without javascript? (I use jquery, if not).

I tried something like this:

<input type="image" name="type" value="1" src="images/type1.jpg" />

But only the coords of the image were sent, not type=1.

Answer 1

The safe approach to this problem is to give the inputs unique names and see which one sends coordinates.

<input type="image" name="submit_blue" value="blue" alt="blue" src="blue.png">
<input type="image" name="submit_red"  value="red"  alt="red " src="red.png">

Only the successful control will send any data. So test to see if submit_blue.x has a value, then test if submit_red.x has one.

There is no need to involve JavaScript at all.

Alternatively, use regular submit buttons instead of server side image maps.

<button name="action" value="blue"><img src="blue.png" alt="blue"></button>

… keeping in mind that this will break in old-IE as it doesn't support <button> properly.

Answer 2

Using jQuery you can submit the clicking on the image. You can add a id for the image or even a classe.

$( "#yourImageId" ).click(function() {
  $( "#yourFormId" ).submit();
});