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


How to make an image-button run a PHP script?

创建一个图像按钮的最佳实践是什么,该按钮在单击时发送值并运行php脚本(执行mySQL查询)。按钮必须是一个图像,而不是默认的提交类型的按钮。我已经在谷歌上搜索了几天了,仍然找不到一个可缝合的答案。我可以使用GET在页面上制作一些重定向到自己的图像按钮(带有包含值的链接的图像),然后我可以使用收集这些按钮

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

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

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

但我似乎无法做到这一点,至少当按钮是一个图像时不会。因此,如果有人知道一个体面的方法来做到这一点,请分享。它不一定是AJAX,例如页面重新加载完全可以。我想我需要JavaScript来做这件事,但我并不真正了解JavaScript,所以一个工作示例会很好。


自动应答器

谢谢你的回答。我发现最简单的工作方法是创建一个表单,其中包含一个进行提交的图像输入类型和一个包含该值的隐藏输入类型。

<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']; }

这是解决我的问题最合适的办法。再次感谢大家的迅速反应。

图像按钮非常混乱!:(

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

例如:

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

这里的缺点是必须根据使用的图像设置宽度和高度。。。

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

请注意:如果用户愿意,他们可以检索值,例如使用Firebug。这一点无法更改。

此外,HTML按钮可以是图像。看看这个。

或者通过onclick在图像上使用XMLhttprequest。有许多关于XMLHTTPRequest的教程。例如这个。

您可以制作POST表单,并将图像用作提交按钮,而无需javascript:

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

在图像上使用onclick事件调用提交

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

使用类似的图像制作提交按钮

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

我认为只有两种方法可以做到这一点,一种是使用get(如您所述),另一种是表单,其中图像按钮是一个输入类型为submit的输入。

我敢肯定,你可以更改提交按钮的样式,使其具有背景图像,如果不能,请忽略我的无知。