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，甚至可以为classe添加。

$( "#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>

在图像上单击提交表单

4 个答案: