submitting form on image click - html

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

Answer 3

My approach is to define multiple images, with a single "name", and multpiple "value".
<form id="myform" method="post" action="mypage.php">
<input type="image" name="color" value="blue" alt="blue" src="blue.png">
<input type="image" name="color" value="red" alt="red " src="red.png">
</form>
Then, on server side, i will be able to read directly the selected value ("blue" or "red") in the "color" POST variable.
<?php
if (isset($_POST["color"]) && !empty($_POST["color"])) {
$selected_color = $_POST['color'];
echo('Selected color is ' . $selected_color);
//"blue" or "red"
}else{
echo ('No image selected');
}
?>

Answer 4

Try this
<form id="myform" action="mypage.php">
your content form here
<img scr="img1" class="submitableimage" />
<img scr="img2" class="submitableimage" />
<img scr="imgn" class="submitableimage" />
</form>
<script>
$('img.submitableimage').click(function(){
$('#myform').submit();
});
</script>