页面刷新后移动到网页的一部分答案

【问题标题】：Moving to a part of webpage after page refresh页面刷新后移动到网页的一部分
【发布时间】：2011-12-08 16:20:01
【问题描述】：

我有一个给定文章的 cmets 列表，并且我在 cmets 下有一个表单供用户添加他们自己的 cmets。

我正在使用 php 进行一些表单验证。

这是过程：

用户填写（或不填写）表单并点击提交按钮。页面刷新。
PHP 验证用户输入，如果没有错误则提交 cmets 或生成错误列表。
如果存在错误，则显示错误。

问题是我希望错误在它执行的表单之前显示在 cmets 下方，但是当页面刷新时，页面顶部会显示，我需要它直接进入错误和表单（很像页面锚）

这可能吗？

点击提交按钮后调用

if(empty($errors)){
        $result = post_comment('event',$event_id, $sendername, $senderemail, $userurl, $comment);
        if ($result == 'Correct') {
            //header('Location: /'.$_SERVER['REQUEST_URI']);
            header('Location: '.$_SERVER['REQUEST_URI']);
        }
        else {
            $send_error = $result;

这是靠近 cmets 和表单，如果存在错误，我想分页访问

// If there was an error sending the email, display the error message
if (isset($send_error)) {
echo "<a name=\"commentsform\"></a>";
echo "There was an error: ".$send_error;
}
/**
* If there are errors and the number of errors is greater than zero,
* display a warning message to the user with a list of errors
*/
if ( isset($errors) && count($errors) > 0 ) {
    echo ( "<h2 class='errorhead'>There has been an error:</h2><p><span class='bold'>You forgot to enter the following field(s)</span></p>" );
    echo ( "<ul id='validation'>\n" );
    foreach ( $errors as $error ) {
        echo ( "<li>".$error."</li>\n" );
    }
echo ( "</ul>\n" );
}
        }
    }

【问题讨论】：

如果 url 的哈希匹配，则使用本机浏览器跳转到 id：example.com#id 将转到 example.com 并跳转到 id 为 id 的元素

标签： php jquery forms validation anchor

【解决方案1】：

给表单一个可以通过 URL 跳转到的 ID：

<div id="submitComment">
  <!-- Comment form here -->
</div>

然后将用户重定向回具有适当哈希标记的相同 URL：

header('Location: http://www.example.com#submitComment');

【讨论】：

应该是：w3.org/TR/html401/struct/links.html#h-12.2.3。它是否真的是另一个问题。

【解决方案2】：

找到你的表单标签，它看起来像这样

<form action='yourpage.php'>

在 URL 后面加上一个散列标签以及提交时将转到的锚点-

<form action='yourpage.php#commentsform'>

【讨论】：

【解决方案3】：

使用页面锚点，您可以通过更改 url 中的哈希值将用户跳转到页面的任何部分。

让表单将用户发送到锚点，如下所示：

<form action='yourpage.php#comments'>

并在您希望用户最终到达的位置制作锚点：

<a name="comments"></a>

【讨论】：