Question

你能帮助任何人吗？

我用PHP制作了一个邮件表单。此表单一直位于页面底部。当我点击发送（这是一个输入标签）时，如果有错误，它会在表格上方显示它们。

但是当你点击发送页面时，首先会回到顶部，你必须一直向下滚动，看看你是否犯了任何错误。

那么是否可以阻止页面从头开始跳回来？

我知道它已被多次解决，例如这里Is it possible not to jump to the top of the page on form submit? 但附上此代码，它仍然会在投资组合部分的联系部分上面流淌...... 我的页面svejdamartin.com 你有什么想法吗？

<footer>
  <section id="contact">                   
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <div id="fourth">
          <h1>Contact Form</h1>
          <p>Please, do not hesitate to contact me if you want to get more information.</p>
           <?php
             if (isset($_GET['sent']) === true) { // ne POST ale GET //
               echo '<div class="alert alert-success" role="alert">Thank you, I will be in touch</div>'; // toto se vypise po odeslani vzkazu //

             } else {  //tento tag konci az na konci formulare !!! Otevrel jsem tam php a ukoncil tento else //
               if (empty ($errors) === false) { // tohle php vypisuje upozornovaci hlasky primo nad formularem //
                 echo '<ul>';
                 foreach($errors as $error) {
                   echo '<li>', $error, '</li>';            
                 }
                 echo '</ul>';
               }           
             ?>
             <form id="form-anchor" method="post" action="index.php#form-anchor">
               <div class="form-group">
                 <input type="text" name="name" class="form-control" placeholder="Your name" <?php if (isset($_POST['name']) === true) { echo 'value="', strip_tags($_POST['name']), '"'; } ?>>                                       
               </div>
               <div class="form-group">
                 <input type="email" name="email" class="form-control" placeholder="Your email" <?php if (isset($_POST['email']) === true) { echo 'value="', strip_tags($_POST['email']), '"'; } ?>>                                       
               </div>                                                                        
               <div class="form-group">
                 <textarea name="message" rows="5" class="form-control" placeholder="message...."><?php if (isset($_POST['message']) === true) { echo strip_tags($_POST['message']); } ?></textarea>                                       
               </div>
               <div class="checkbox">
                 <label>
                   <input type="checkbox" name="check">I am human
                 </label>
               </div>
               <input type="submit" name="submit" class="btn btn-secondary" value="send message">                                   
             </form>
             <?php
             }
           ?>
         </div>    
       </div>
     </div>
  </section>
</footer>

Answer 1

您可以尝试使用JavaScript在使用echo '<script>location.hash = "#form-anchor";</script>';

提交表单后加载页面时转到锚点

<footer>
<section id="contact">                   
                <div class="row">
                    <div class="col-md-6 col-md-offset-3">
                        <div id="fourth">

                            <h1>Contact Form</h1>

                            <p>Please, do not hesitate to contact me if you want to get more information.</p>

                                   <?php
                                    if (isset($_GET['sent']) === true) {    // ne POST ale GET //
                                        echo '<div class="alert alert-success" role="alert">Thank you, I will be in touch</div>';
                                        echo '<script>location.hash = "#form-anchor";</script>'; // toto se vypise po odeslani vzkazu //

                                    } else {  //tento tag konci az na konci formulare !!! Otevrel jsem tam php a ukoncil tento else //
                                    if (empty ($errors) === false) { // tohle php vypisuje upozornovaci hlasky primo nad formularem //
                                        echo '<ul>';
                                        foreach($errors as $error) {
                                            echo '<li>', $error, '</li>';            
                                        }
                                        echo '</ul>';
                                        echo '<script>location.hash = "#form-anchor";</script>';
                                    }    
                                    ?>

                            <form id="form-anchor" method="post" action="index.php">
                                <div class="form-group">
                                    <input type="text" name="name" class="form-control" placeholder="Your name" <?php if (isset($_POST['name']) === true) { echo 'value="', strip_tags($_POST['name']), '"'; } ?>>                                       
                                </div>
                                 <div class="form-group">
                                     <input type="email" name="email" class="form-control" placeholder="Your email" <?php if (isset($_POST['email']) === true) { echo 'value="', strip_tags($_POST['email']), '"'; } ?>>                                       
                                 </div>                                                                        
                                <div class="form-group">
                                    <textarea name="message" rows="5" class="form-control" placeholder="message...."><?php if (isset($_POST['message']) === true) { echo strip_tags($_POST['message']); } ?></textarea>                                       
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="check">I am human
                                    </label>
                                </div>
                            <input type="submit" name="submit" class="btn btn-secondary" value="send message">                                   
                            </form>
                            <?php
                            }
                            ?>

                      </div>    
                 </div>
            </div>
</section>

Answer 2

我访问了您的页面，我发现，当我填写表单但没有选择“我是人”复选框并按发送消息时，URL显示'#fourth'，这是锚点标记的地址。但是我在这里发现了一个问题，当我们点击其他链接（如home或about）时，页面首先导航到该部分，然后URL更改，这直接意味着只是传递链接地址不会导航到您的页面部分，因为javascript事件是也参与了这个，如附加屏幕截图所示，所以我建议你回忆一下屏幕截图中显示的javascript函数和所需的目标参数，如

function setSection(target, e) {
    e.preventDefault()


    var $target = $(target);

    //sroll and show hash
    $('html,body').animate({
        'scrollTop': $target.offset().top
    }, 1000, 'swing', function () {
        window.location.hash = target;
    });

    // scroll and do not show hash
    $('html, body').animate({
        'scrollTop': $target.offset().top
    }, 1000, 'swing');
});
}

并在联系表单提交时调用此函数。

Answer 3

页面在投资组合部分而不是联系人中结束的原因是浏览器在加载投资组合中的图像之前查找#fourth锚点。

因此浏览器正确定位页面，但由于动画，联系表格向下移动。

解决此问题的一种方法是定义#imag div的高度，使其已经是图像的大小。

Answer 4

表单旨在发布到表单中的元素。将action =“index.php＃form-anchor”更改为action =“index.php”

PHP电子邮件表单中的锚标记

4 个答案: