当提交表单时出现错误,向下滚动到页面底部的联系表单

时间:2013-12-23 15:18:14

标签: php html contact-form

我想要完成的是当用户尝试提交包含错误的表单并添加错误消息/页面重新加载时我需要页面自动向下滚动到页面底部的联系表单位置。

我目前在footer.php内有该表单,我将其包含在每个页面中,如下所示:<?php include('includes/footer.php') ?>

这是我的html形式:

<form method="post" action="#">
  <input name="name" placeholder="Name*" type="text" value="<?php echo htmlspecialchars($name);?>">
     <span class="error"><?php echo $nameErr;?></span>

  <input name="email" placeholder="Email*" type="email" value="<?php echo htmlspecialchars($email);?>">
    <span class="error"><?php echo $emailErr;?></span>

  <input name="phone" placeholder="Phone #" type="tel" />

  <textarea name="message" placeholder="Message*"><?php echo $message;?></textarea>
    <span class="error"><?php echo $messageErr;?></span>

  <input id="submit" type="submit" name="submit" value="Send" />
</form>

<小时/> 编辑 - 基于下面的答案,这就解决了我的问题......

<form method="post" action="#footer">
  //everything here
</form>

2 个答案:

答案 0 :(得分:3)

在重定向到错误消息的页面时,在您的网址中添加#id_of_form_or_div

将id添加到包含表单的表单或div中。如果您在网址中添加了他们的ID,那么页面将移动到该特定部分。

例如,您的页脚ID为footer。然后你会url www.domain.com/index.php#footer

答案 1 :(得分:1)

您还可以打印javascript变量以了解是否存在错误,然后使用javascript滚动到表单。

类似的东西:

var erros = "<?php echo $errors ?>";

<script>
    if (errors) {
        document.getElementById("form_id").scrollIntoView();
    }
</script>