如何使用图片作为提交按钮来触发php函数
如何使用图片作为提交按钮来触发php函数
提问于 2018-10-25 23:47:17
我正在寻找一种更好的方式提交一个表格使用一个图片作为提交按钮。
下面的代码工作正常，但看起来不是很流畅。它仍然有type=submit的悬停效果，在移动设备上看起来也不好。
有没有人想出一个更好的方法来使用图片来触发这个函数，并且仍然发送隐藏的值。或者像onclick，IDK这样的东西？
Post触发器：
if (isset($_POST['unfollow'])) {
unfollow_user();
header("Refresh:0");
}表格：
echo "
<form action='' method='post'>
<input type='hidden' name='user_id' value='".$user_id."'/>
<input type='hidden' name='other_user_id' value='".$latesttipusers['id']."'/>
<button type='submit' name='unfollow' class='follow'><img class='floatright
follow_img_small' src='img/following_da_small.png'></button>
</form>"; }Submit触发此函数
function unfollow_user(){
global $mysql_connect;
$my_user_id = $_POST['user_id'];
$follow_other_user_id = $_POST['other_user_id'];
$sql_query = "DELETE FROM tb_follow WHERE user_id = '$my_user_id' AND
follow_user_id = '$follow_other_user_id'";
$result = mysqli_query($mysql_connect, $sql_query);
}CSS
.follow_img_small {
height: 25px;
margin-right: -25px;
margin-top: -10px;
}
.follow_img:hover{
opacity: 0.7;
}回答 2
Stack Overflow用户
发布于 2018-10-30 05:08:21
正如评论所建议的那样，您应该将图像作为按钮的背景(并将其类型保留为:submit)。
所以，不是这一行：
<button type='submit' name='unfollow' class='follow'><img class='floatright
follow_img_small' src='img/following_da_small.png'></button>你应该这样写：
<button type='submit' name='unfollow' class='follow'><span>Submit Me</span></button>在你的CSS样式中是这样的(依赖于你的css作为img)：
button.follow { width: auto; height: 25px; background: url(img/following_da_small.png) no-repeat; background-size: cover; }
button.follow span {visibility: hidden; /* OR: opacity: 0; this is just for accessibility purpose */ }希望它能解决这个问题，祝你好运！
Stack Overflow用户
发布于 2018-10-26 06:21:31
正如所有评论所说，使用HTML表单元素：
<input type="image" id="submit" src="" />如果您使用上面的方法，只需使用jQuery触发提交：
$("#submit").on("click", function () {
$("form").trigger("submit");
});您也可以在button元素或input[type=submit] background-image: url();元素上使用CSS，但我推荐使用上面的方法，因为它在大多数平台上看起来会更好。
希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52993392
复制相关文章
相似问题