![](/img/trans.png)
[英]How to block form submit with same trigger button but different function?
[英]How to use picture as submit button to trigger php function
我正在寻找一种更好的方式使用图片作为提交按钮来提交表单。
下面的代码可以正常工作,但是看起来不太流畅。 它仍然具有type=submit
的悬停效果,并且在移动设备上也看起来不错。
有人对使用图片触发此功能并发送隐藏值的更好方法有想法吗? 也许像onclick
,IDK之类的东西?
发布触发器:
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>"; }
提交触发此功能
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;
}
正如评论所建议的,您应该将图像作为按钮的背景(并将其保留为type: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 */ }
希望它能解决它,祝你好运!
正如所有评论所言,请使用HTML表单元素:
<input type="image" id="submit" src="" />
<input type =“ image” />-Mozilla开发人员网络
如果使用上述方法,只需使用jQuery触发提交:
$("#submit").on("click", function () {
$("form").trigger("submit");
});
您还可以使用CSS background-image: url();
在button
元素或input[type=submit]
按钮元素上,但是我推荐上面的方法,因为它在大多数平台上看起来都更好。
希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.