谁能告诉我如何让页面跳转(或滚动)到特定的id，在php验证失败后出现错误消息?
我有一个php页面很长，用户必须滚动到底部。在页面中间，有一个联系表单，用户可以输入电子邮件地址和评论。用户按下"发送"按钮后，php验证工作。但是，在按下"发送"按钮后，它会跳到页面的最顶部。之后，我可以看到错误信息显示在联系人表单下方，我自己向下滚动。但是，这不应该是你们都同意的方式……
然后，我尝试使用javascript scrollTop，如下所示。ScrollTop工作，尽管没有出现错误消息....
我知道我错过了一些东西，但我不知道我错过了什么....
你能帮我一下吗?
index.php和top.js如下所示;
index . php
<?php
session_start();
if(isset($_POST['sendemail'])){
$_SESSION['email'] = $_POST['email'];
$_SESSION['message'] = $_POST['message'];
if (!$_SESSION['email'] || !filter_var($_SESSION['email'], FILTER_VALIDATE_EMAIL)) {
$errEmail = 'please type correct email address';
}
if (!$_SESSION['message']) {
$errMessage = 'please type message';
}
if (!$errEmail && !$errMessage) {
header('Location: messagesent.php');
exit;
}
}
?>
<html>
<head>..</head>
<body>
...
<section id="contact">
...
<div>
<input name="email" type="text">
<label>Email</label>
<?php echo "<p style='color:red;'>$errEmail</p>";?>
</div>
<div>
<textarea name="message"></textarea>
<label>Message</label>
<?php echo "<p style='color:red;'>$errMessage</p>";?>
</div>
<div class="right-align">
<button id="contactbutton" type="submit" name="sendemail">Send</button>
</div>
...
</section>
...
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/top.js"></script>
</body>
</html>
top.js
$(function(){
$('#contactbutton').click(function(){
$('html,body').animate({
scrollTop: $('#contact').offset().top
}, 1000);
return false;
});
});
假设您有一个包含输入的表单元素，您可以使用片段标识符将表单操作设置为当前页面:
<form action="#errors"> ... </form>
你可以给错误容器指定一个id:
<div id="errors">Error list</div>
或者在错误容器前放置一个空锚:
<a name="errors"></a>
<div>Error list</div>
name和id值在文档中必须是唯一的。不需要显式重定向
也许你可以为你的消息框创建一个id:
<?php echo "<p id='"errMessage'" style='color:red;'>$errMessage</p>";?>
那么在验证中你可以这样做:
if (isset($errMessage) && !empty($errMessage)) {
header("Location: index.php#errMessage");
}
这将使光标集中在错误消息上。您还可以使用相同的技术来更改文本区域和其他所需字段的焦点。