有人可以告诉我如何让页面跳转(或滚动)到特定的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;
  });
});

===============>>#1 票数:0

也许您可以为您的消息框创建一个ID:

<?php echo "<p id=\"errMessage\" style='color:red;'>$errMessage</p>";?>

然后在验证中,您可以执行以下操作:

if (isset($errMessage) && !empty($errMessage)) {
    header("Location: index.php#errMessage");
  }

这会将光标聚焦在错误消息上。 您也可以使用相同的技术将焦点更改为所需的文本区域和其他字段。

===============>>#2 票数:0 已采纳

假设您有一个包含输入内容的表单元素,则可以使用片段标识符将表单操作设置为当前页面:

<form action="#errors"> ... </form>

然后,您可以为错误容器分配一个ID:

<div id="errors">Error list</div>

或在错误容器之前放置一个空的锚点:

<a name="errors"></a>
<div>Error list</div>

名称和ID值在文档中必须唯一。 无需显式重定向。

  ask by user3929763 translate from so

未解决问题?本站智能推荐:

1回复

在动画制作之前,JQuery Animate函数会跳转到屏幕顶部

我对Jquery比较新,所以如果这很明显,请随时打我。 我有这个小小的脚本,它将移动div的边距并将浏览器滚动到新内容。 当应用页面跳转到顶部然后跳回然后动画。 这是JS。 如果这是一个重复的问题,任何帮助将不胜感激和抱歉,如果是的话我找不到。 谢谢,-S
2回复

scrollTop addclass会跳转

我几乎是编码方面的新手,目前我正在研究一家公司。 他们给了我一个html和css文件进行编辑,我不得不根据滚动的距离使图像出现和消失。 从顶部到达特定距离后,我设法使班级消失了,但是这跳得很奇怪。 该代码不是我的,我只是编辑了一些东西,所以如果缺少任何信息,请告诉我,以便我添加。 H
1回复

ScrollTop转到错误的顶部

我有项目清单。 当我单击一项(项目)时,它会打开(没关系),并滚动到页面顶部(错误的顶部!)。 当我有一个打开的项目并且决定打开下面的项目时,就会出现问题:打开的项目高度使顶部位置增加,并且我单击的第二个项目在顶部位置过高。 遵循以下FIDDLE:如果我打开project1 ,然后单击
1回复

在id位置上方滚动80px,而不是id位置

我有此代码段,该代码段在加载时滚动到页面上的#id 。 问题是我们的粘性导航高度为80px ,因此它覆盖了滚动到该特定#id时我希望看到的部分。 这段代码很棒。 但我怎么让它在滚动80px的ID,而不是上面正好#id 。 (其wordpress网站) 谢谢你的帮助!
2回复

单击按钮滚动到无ID的文本

我有多行带有文本标题的行,这些行的标题也是如此。 我正在寻找一种搜索功能,可在单击按钮后滚动到搜索栏中的正确标题。 现在,此文本没有类或ID atm,并且还使用<b>Titel: " . $row['titel'] . "</b>从数据库中加载了该文本,在这种情况下,
1回复

jQuery-滑动到id .stop(); 当量

我有这段代码可以向下滑动到页面的每个部分。 导航链接具有一个ID,该ID链接到相应的类。 除非您单击导航按钮,然后快速单击另一个导航按钮,否则它将继续播放动画,这将完美地工作。 这还不错..但是,如果您将按钮捣碎,它确实会吓到。 我尝试使用.stop(); 但是正如预期的那样,这将
2回复

如何在js中的多个ID上滚动页面

请检查我还没有做什么http://jsfiddle.net/dUVmh/1/ 。 关于我要实现的动画是: 首次向下滚动页面时,窗口滚动到#green DIV。 之后,如果您再次向下滚动窗口,则滚动到#yellow DIV并在向上滚动时将其相同(从#yellow到#green)。
2回复

当在同一项目上多次调用时,scrollTop会跳转

我正在使用jquery的scrollTop函数,无法弄清楚为什么在同一项目上多次调用时它会跳来跳去。 我整理了这个例子来说明问题。 单击测试按钮时,它会在滚动到指定的项目和列表上的另一个位置之间交替。 $('#button').click(function () { $(
1回复

滚动到列表中的特定项目,然后滚动到列表中的下一个特定项目

我正在开发基于Web的应用程序(使用Javascript,Jquery,html,css),只需按下该键即可滚动这些频道,因为频道数大于屏幕高度,所以当到达每个频道时,我必须使用滚动功能向下或向上10个通道,为此我使用scrollTop方法。 因此,让我这样简化我的问题(如果有人回答了这个
1回复

jQuery验证,滚动到错误无法正常工作

所以我有一个3阶段的表格,在每一步验证,并在提交时再次验证。 我有一些问题,我认为这可能是由于我的JS的结构,但我不能确定。 由于某种原因,它只滚动到第一个错误一次,一旦有人填写该字段时该错误被清除它然后只滚动到页面的顶部。 尽管我们现在可以在一个新的页面上。 我已经复制了所有相关代