Question

创建图像按钮的最佳做法是什么，该按钮在单击时发送值并运行php脚本（执行mySQL查询）。该按钮必须是图像，而不是默认提交类型的按钮。我一直在谷歌搜索这几天，我仍然找不到一个可靠的答案。我可以使用GET并在页面上制作一些图像按钮（带有包含值的链接的图像），这些按钮会重定向到自身，然后我可以用

来收集

if (isset($_GET['variable']))

但我真的不希望用户看到这些值。我尝试创建一个只有一个按钮的表单，单击该表单将重新加载页面，我可以捕获并使用该值

if (isset($_POST['submit_value'])) {$var = $_POST['submit_value']; }

但我似乎无法做到这一点，至少在按钮是图像时是这样。所以，如果有人知道这样做的好方法，请分享。它不一定是AJAX，例如页面重新加载完全没问题。我猜我需要JavaScript来做这个，但我真的不懂JavaScript，所以一个有用的例子会很好。

SELF-ANSWER

感谢您的所有答案。我发现最简单的工作方式是创建一个带有输入类型图像的表单，使得提交和隐藏的输入类型带有该值。

<form action="some_page.php" method="POST">
    <input type="hidden" name="variable" value="50" />
    <input type="image" src="image.png" name="submit" />
</form>

在PHP方面，我用它来捕捉价值。

if (isset($_POST['variable'])) { $var = $_POST['variable']; }

这是我的问题最合适的解决方案。再次感谢大家的快速回应。

Answer 1

图像按钮非常混乱！：（

我建议使用CSS将背景图像放到普通<input type="submit">。这样，当用户提交表单时，值将始终可见（例如，在请求中发送）。

例如：

.myImageSubmitButton{
    width: 100px;
    height: 22px;
    background: url(images/submit.png) no-repeat;
    border: none;
    /** other CSS **/
}

错误这里的事情是您必须根据使用的图像设置宽度和高度...

Answer 2

如果必须是<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>

或更改隐藏字段并将表单发布到同一页面：

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

Answer 3

只需注意：如果用户想要，他们可以检索值，例如使用Firebug。这不能改变。

此外，HTML按钮可以是图像。请参阅this。

或者在onclick上的图像上使用XMLhttprequest。 XMLHTTPRequest有很多教程。例如this。

Answer 4

您可以创建一个POST表单，并将该图像用作提交按钮而不使用javascript：

<input type="image" src="myimage.gif" name="submit">

Answer 5

使用图片上的onclick事件调用提交

<img src="image.jpg" onclick="document.formname.submit();" />

Answer 6

使用像

这样的图像制作提交按钮

  <input type="submit" style="background-image:url(image); border:none;   
 width:10px;height:10px; color:transparent;" value=" " name="submit_value"/>

Answer 7

我认为这样做的唯一两种方法是使用gets（就像你说过的那样）或者使用一个表单，其中图像按钮是一个带有提交类型的输入。

我很确定你可以改变提交按钮的样式，使其具有背景图像，如果没有则忽略我的无知。

如何使图像按钮运行PHP脚本？

7 个答案: