主要用php做一个成绩展示元素。我已经将图像制作为其他东西的按钮，但遇到了我似乎无法将两个输入按钮更改为“按钮图像”的墙 我已经尝试了使用 type=image 的其他建议但是它不会正确发布
那么有没有办法在保持type='submit'场景的同时改变图片。或者确保其 POST 正确的替代方法。之后的部分是它试图发布以触发成绩获取系统的任何内容。感谢您的帮助。
代码如下:
// the image button im trying to apply
<a href='logout.php'><img class='loggers' src="img/logout.png" onmouseover="this.src='img/logout2.png'"onmouseout="this.src='img/logout.png'" style="width: 11%; height: 6%"/></a>
<form class='options' action="" method="post">
//change these to images while maintaining 'submit' type
<input type="submit" name ="grades" value="Display Grades"
<br><br>
<input type="submit" name="password" value="Change Password">
</form>
<body>
<?php
if (isset($_POST['grades'])) {
$id = $login_session;
$dbhost = 'xxxx.xxxxx.com';
$dbuser = 'xxxxxx';
$dbpass = 'xxxxxx';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db('grades_db');
$sql = "Select student_id, course_id, prelim, midterm, avg_pre_mid, post_removal, pre_final, final_grade, remarks FROM `grades`
WHERE `student_id` ='".$id."';";
$retval = mysql_query($sql,$conn);
if (!$retval) {
die ('No Grades Yet');
}
echo "<div class='table-responsive'><table class='table table-bordered table-hover'><tr><td></td><td>Student ID</td><td>Subject</td><td>Preliminaries</td><td>Midterms</td><td>Average of Preliminaries and Midterm</td><td>Post Removal</td><td>Pre-Finals</td><td>Finals</td><td>Remarks</td></tr>";
while($row = mysql_fetch_array($retval, MYSQL_ASSOC)) {
echo "<tr>
<td></td>
<td>{$row['student_id']}</td>
<td>{$row['course_id']}</td>
<td>{$row['prelim']}</td>
<td>{$row['midterm']}</td>
<td>{$row['avg_pre_mid']}</td>
<td>{$row['post_removal']}</td>
<td>{$row['pre_final']}</td>
<td>{$row['final_grade']}</td>
<td>{$row['remarks']}</td>
</tr>";
}
echo "</table></div>";
mysql_close($conn);
}
最佳答案
首先，我无法确定将这些按钮中的任何一个包装在表单对象中有什么明显的优势，除非您有额外的数据需要更私密地发送到服务器(使用 POST)。话虽这么说，下面的所有内容都经过优化，可以将表单提交回 PHP 脚本，但应该很容易修改以在没有它的情况下工作。
JQuery 有一个非常简单的方法来处理这样的事情。这是它的工作原理。
首先，确保 JQuery 加载到您的页面中。因为 JQuery 非常大并且使用非常广泛，所以我喜欢为此使用 CDN。
<?php // Your entire page, up to the closing body tag... ?>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
</body>
</html>
<?php // anything that comes after your closing html tag... ?>
在末尾添加对 JQuery 的脚本调用有助于缩短页面加载时间(如果在文档顶部调用，JQuery 等前端库可能很重，导致页面加载时间更长)。
此时，您可以开始使用 JQuery。一开始它看起来很吓人，但只要稍加练习，您就可以用它很快做出奇妙的事情。
首先要做的是用图像替换提交按钮，并为表单和图像分别提供一个 id，我们可以使用它通过 JQuery 处理它:
<?php
/*
Make sure you set your action to the route that will handle the form!
If you plan on having one route handle all form actions, you'll need
to add another hidden field to the form so you can tell which form it
came from and route accordingly.
*/
?>
<form class='options' action='somewhere.php' method='post' id='view-grades-form'>
<input type="hidden" name='grades' value='<?php $student_id
// Or wherever you are storing what user's data you're looking for ?>'>
<img class='loggers' src='img/logout.png' id='view-grades-submit-button'>
</form>
如果我处在你的位置，如果我以这种方式构建导航，我会为你想要使用的每个按钮创建一个新的表单。
避免在基于光栅的图像(png、jpeg、gif、bmp、tiff)上使用 % 高度和宽度通常是一种很好的形式，除非您将它们用作背景图像(不是这种情况)。在图像上使用 % width 和 height 会以可怕的方式拉伸(stretch)和扭曲它们。尽量避开那条大道。鉴于 logout.png 已经是您想要的大小，您可以考虑使用其现有尺寸对其进行样式设置，或者只是将高度和宽度一起去掉。
接下来要做的是使用 JQuery 库编写一点点 Javascript。在页面底部，在 JQuery 调用和结束 body 标记之间，您可以添加如下内容:
<?php // JQuery above... ?>
<script>
// Initialize JQuery.
$(document).ready(function(){
// Add event handlers to take care of events involving the button.
// eg. mousein, mouseout, click.
// Note that we can bind these actions to the button through its id. :)
// Switch images when the image is moused over.
$('#view-grades-submit-button').mouseover(function(){
$(this).attr('src', 'img/logout2.png');
});
// Switch images back when the mouse leaves the button.
$('#view-grades-submit-button').mouseout(function(){
$(this).attr('src', 'img/logout.png');
});
// Submit the form when the button is clicked.
$('#view-grades-submit-button').click(function(){
// We can select the form object using JQuery and make JQuery submit it.
$('#view-grades-form').submit();
});
};
</script>
<?php // </body> below... ?>
最后(也可能是最少，取决于您目前对事物的喜好)是造型。如果你有任何额外的样式你想做，把它放在标签内的一组样式标签中，在标签下面。鉴于您已经设置了类和 id(类可以应用于任意数量的对象，而 id 每页只能使用一次)修改表单对象的任何样式设置应该是轻而易举的。例如:
<style>
/* CSS starts off pretty simple. If you want to do something for all instances of a specific tag, you'll type something like this: */
body {
/* Put your styling options here. */
}
/* For classes, start with a period (.): */
.options {
/* Put your styling options here. */
}
/* And for ID's, start with a #: */
#options {
/* Put your styling options here. */
}
</style>
两个不直接附加到您的问题但与您的代码相关的小旁注:
- 您的 SQL 语句对于 SQL 注入(inject)采摘来说已经成熟。在 Google 上查找“PHP 防止 SQL 注入(inject)攻击”并按照说明进行操作。这将使您不必回答非常尴尬的问题，范围从 why people's data was stolen to why your web server hosting content for a child porn ring .如果您的答案涉及在 SQL 查询中使用问号 (?)，那么您的方向是正确的。
- 确保永远不要将凭据发布到任何在线内容(例如 $dbhost、$dbconnection 和 $dbuser)，因为再多的安全措施也无法阻止人们使用有效凭据进入您的系统。
祝你好运!
关于php - 出于发布原因保留输入类型 'submit' 但使用图像作为按钮的方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33094575/