Html 点击图片提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10446816/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
submitting form on image click
提问by domino
I have multiple images inside one form. Depending on the image clicked a specific value should be sent with a POST.
我在一个表单中有多个图像。根据单击的图像，应使用 POST 发送特定值。
Can this be done without javascript? (I use jquery, if not).
这可以在没有 javascript 的情况下完成吗？（如果没有，我使用 jquery）。
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.
但是只发送了图像的坐标，而不是 type=1。
回答by Quentin
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.xhas a value, then test if submit_red.xhas one.
只有成功的控制才会发送任何数据。所以测试看看是否submit_blue.x有一个值，然后测试是否submit_red.x有一个值。
There is no need to involve JavaScript at all.
根本不需要涉及 JavaScript。
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.
...请记住，这将在旧版 IE 中中断，因为它不能<button>正确支持。
回答by michelmany
Using jQuery you can submit the clicking on the image. You can add a id for the image or even a classe.
使用 jQuery，您可以提交对图像的点击。您可以为图像添加 id 甚至类。
$( "#yourImageId" ).click(function() {
$( "#yourFormId" ).submit();
});
回答by Marco Rossi
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.
然后，在服务器端，我将能够直接读取“颜色”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');
}
?>
回答by bitoshi.n
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>
