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 jquer

Answer 1

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>

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

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 4

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');
 }
?>