点击图片提交表单答案

【问题标题】：submitting form on image click点击图片提交表单
【发布时间】：2012-05-04 10:12:19
【问题描述】：

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

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

我尝试过这样的事情：

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

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

【问题讨论】：

无代码！请问可以加点吗？ :)
如何显示您的图像。

标签： html

【解决方案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>。

【讨论】：

按钮方式好像不太靠谱，但是我喜欢控制方式。一些额外的工作和一堆新的变量，但我想我会同意的。谢谢。

【解决方案2】：

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

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

【讨论】：

【解决方案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>

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

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

【讨论】：

那是无效的 HTML。 value 属性不适用于image 输入（只有某些浏览器会在单击图像映射时发送该值，因此不可靠）。

【解决方案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>

【讨论】：

如果单击整个文档中的任何图像，它将提交表单……但不告诉服务器它是哪一个。
PS 不给任何代码。我知道它将为每个 img 元素提交。但我只想举个例子。它只是选择器，如果图像具有可提交的图像类名称，您可以提供诸如 $('img.submitableimage') 之类的详细信息