javascript - 如何使用图片作为提交按钮触发php函数

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 样式中它是这样的(依赖于你的 img css):

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 */ }

希望它能解决问题，祝你好运!