Question

我正在寻找一种更好的方式来使用图片作为提交按钮来提交表单。

下面的代码可以工作，但是看起来不太流畅。它仍然具有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;
}

Answer 1

正如评论所建议的那样，您应该将图像作为按钮的背景（并将其保留为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 */ }

希望它能解决它，祝您好运！

Answer 2

正如所有评论所说，请使用HTML表单元素：

<input type="image" id="submit" src="" />

<input type="image" /> - Mozilla Developer Network

如果使用上述方法，只需使用jQuery触发提交：

$("#submit").on("click", function () {
     $("form").trigger("submit");
});

您还可以在background-image: url();元素或button按钮元素上使用CSS input[type=submit]，但我建议您使用上面的CSS，因为它在大多数平台上看起来都更好。

希望这会有所帮助！

如何使用图片作为提交按钮来触发PHP功能

2 个答案: