javascript 如何使图像按钮运行 PHP 脚本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9215219/
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
How to make an image-button run a PHP script?
提问by Alternatex
What's the best practice to create an image button that sends a value and runs a php script (that executes a mySQL query) when clicked. The button has to be an image and not a default submit type of button. I've been googling this for a few days and I still can't find a sutable answer. I could use GET and make a few image buttons (images with links that contain values) on the page that redirect to itself which then I can collect with
创建一个图像按钮的最佳实践是什么，该按钮在单击时发送一个值并运行一个 php 脚本（执行一个 mySQL 查询）。该按钮必须是图像，而不是默认提交类型的按钮。我已经在谷歌上搜索了几天，但仍然找不到合适的答案。我可以使用 GET 并在页面上制作一些图像按钮（带有包含值的链接的图像）重定向到自身，然后我可以收集
if (isset($_GET['variable']))
but I don't really want the user to see the values. I tried creating a form which has only one button in it that when clicked will reload the page and I could capture and use the value with
但我真的不希望用户看到这些值。我尝试创建一个只有一个按钮的表单，单击该按钮将重新加载页面，我可以捕获并使用该值
if (isset($_POST['submit_value'])) {$var = $_POST['submit_value']; }
but I can't seem to make this work, at least not when the button is an image. So if anyone knows a decent way to do this, please share. It doesn't have to be AJAX e.g. page reload is perfectly fine. I'm guessing that I need JavaScript to do this but I don't really know JavaScript so a working example would be nice.
但我似乎无法完成这项工作，至少当按钮是图像时不能。因此，如果有人知道这样做的体面方法，请分享。它不必是 AJAX，例如页面重新加载非常好。我猜我需要 JavaScript 才能做到这一点，但我真的不知道 JavaScript，所以一个工作示例会很好。
SELF-ANSWER
自我回答
Thank you for all of your answers. I found that the simplest working way to go with is to create a form with an input type of image that makes the submit and an input type of hidden that carries that value.
感谢您的所有回答。我发现最简单的工作方法是创建一个表单，其输入类型为图像，用于提交，输入类型为隐藏，带有该值。
<form action="some_page.php" method="POST">
<input type="hidden" name="variable" value="50" />
<input type="image" src="image.png" name="submit" />
</form>
And on the PHP side I use this to catch the value.
在 PHP 方面，我使用它来捕获值。
if (isset($_POST['variable'])) { $var = $_POST['variable']; }
This is the most suitable solution for my problem. Thank you all again for your speedy responses.
这是最适合我的问题的解决方案。再次感谢大家的快速回复。
回答by Jovan Perovic
Image buttons are pretty much a mess! :(
图像按钮几乎一团糟！:(
I would suggest using CSS to put background-image to ordinary <input type="submit">. This way value will always be visible (eg. sent in request) when user submits the form.
我建议使用 CSS 将 background-image 置于普通<input type="submit">. 当用户提交表单时，这种方式值将始终可见（例如，在请求中发送）。
For example:
例如：
.myImageSubmitButton{
width: 100px;
height: 22px;
background: url(images/submit.png) no-repeat;
border: none;
/** other CSS **/
}
the badthing here is that you must set width and height according to image used...
这里的坏处是你必须根据使用的图像设置宽度和高度......
回答by Kaii
if it must be a <button>you can redirect the form to another script like this:
如果它必须是一个，<button>您可以将表单重定向到另一个脚本，如下所示：
<form action="somescript.php" method="POST" name="myform">
<input type="submit" name="submit" value="normal submit">
<button name="foo" type="button" value="bar"
onclick="document.myform.action = 'someotherscript.php';
document.myform.submit()">
<img src="someimage.png">
</button>
</form>
or change a hidden field and post the form to the same page like this:
或更改隐藏字段并将表单发布到同一页面，如下所示：
<form action="somescript.php" method="POST" name="myform">
<input type="submit" name="submit" value="normal submit">
<input type="hidden" name="action" id="hidden_action" value="normal_action">
<button name="foo" type="button" value="bar"
onclick="document.getElementById('hidden_action').value = 'special_action';
document.myform.submit()">
<img src="someimage.png">
</button>
</form>
回答by axiomer
Just a note: if the user wants to, they CAN retrieve the values, for example with Firebug. This cannot be changed.
请注意：如果用户愿意，他们可以检索值，例如使用 Firebug。这是无法改变的。
Also, HTML buttons can beimages. See this.
此外，HTML 按钮可以是图像。看到这个。
Or use XMLhttprequest on an image wih onclick. There are many tutorials for XMLHTTPRequest. For example this.
或者通过单击对图像使用 XMLhttprequest。XMLHTTPRequest 有很多教程。例如这个。
回答by martti d
invoke a submit using onclick event on the image
使用图像上的 onclick 事件调用提交
<img src="image.jpg" onclick="document.formname.submit();" />
回答by thecodedeveloper.com
make submit button with image like that
制作带有这样图像的提交按钮
<input type="submit" style="background-image:url(image); border:none;
width:10px;height:10px; color:transparent;" value=" " name="submit_value"/>
回答by Sean
I think the only two ways of doing this are with gets (like you've stated) or with a form where the image button is an input with type submit.
我认为这样做的唯一两种方法是使用获取（如您所述）或使用图像按钮是输入类型提交的表单。
I'm pretty sure you can change the styling of a submit button so that it has a background image, if not then ignore my ignorance.
我很确定您可以更改提交按钮的样式，使其具有背景图像，否则请忽略我的无知。
回答by Stelian Matei
You can make a POST form and use the image as a submit button without javascript:
您可以制作一个 POST 表单并将图像用作没有 javascript 的提交按钮：
<input type="image" src="myimage.gif" name="submit">
