html - 点击图片提交表单

Question

我在一个表单中有多个图像。根据单击的图像，应使用 POST 发送特定值。

这可以在没有javascript的情况下完成吗？（如果没有，我使用 jquery）。

我试过这样的事情：

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

但是只发送了图像的坐标，而不是 type=1。

Answer 1

解决此问题的安全方法是为输入指定唯一名称并查看哪个发送坐标。

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

只有成功的控制才会发送任何数据。所以测试看是否submit_blue.x有一个值，然后测试是否submit_red.x有一个。

根本不需要涉及 JavaScript。

或者，使用常规提交按钮而不是服务器端图像映射。

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

...请记住，这将在旧 IE 中中断，因为它不能<button>正确支持。

Answer 2

使用 jQuery，您可以提交对图像的点击。您可以为图像甚至类添加一个 id。

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

Answer 3

我的方法是定义多个图像，具有单个“名称”和多个“值”。

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

然后，在服务器端，我将能够直接读取“颜色”POST 变量中的选定值（“蓝色”或“红色”）。

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

试试这个

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