PHP電子メールフォームのアンカータグ

Question

誰かを助けてもらえますか？

私はPHPでメールフォームを作成しました。このフォームはページの一番下にあります。私がsend（これは入力タグです）をクリックすると、エラーがあればフォームの上にそれらが表示されます。

しかし、送信をクリックすると、最初にページが先頭に戻り、エラーが発生したかどうかを確認するために下方向にスクロールする必要があります。

ページを先頭に戻さないようにすることは可能ですか？

私はそれが何回も解決されたことを知っています。ここにIs it possible not to jump to the top of the page on form submit? しかしこのコードを囲むそれはまだポートフォリオセクションの接触セクションの上にscrool ...... 私のページ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

連絡先ではなくポートフォリオセクションでページが終了するのは、ポートフォリオ内のイメージがロードされる前にブラウザが#fourthアンカーを検索するためです。

ブラウザはページを正しく配置しますが、アニメーションのために連絡先フォームが下に移動します。

これを修正する方法の1つは、#imag divの高さを定義して、イメージのサイズになるようにすることです。

Answer 2

あなたは、フォームが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 3

を使用して送信されたページが読み込まれた後、私はあなたのページを訪問した際にアンカーに行くためにはJavaScriptを使用しようとすることができ、私はことがわかりましたフォームを記入して「私は人間です」チェックボックスを選択せず​​にメッセージを送信すると、連絡先のタグをアンカーするアドレスである「＃4番目」が表示されます。しかし私はこの問題を1つ見つけました。ホームや他のリンクをクリックするとページが最初にセクションに移動してURLが変わります。リンクのアドレスを渡すだけでジャバスクリプトイベントがページセクションに移動することはありませんまた、添付の画面に示すように、このに関与を撃ったので、私はあなたが

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'); 
}); 
} 

として、必要なターゲットパラメータを使用してスクリーンショットに示すjavascript関数を呼び出すと、問い合わせフォームを送信するときに、この関数を呼び出すことが示唆されました。

Answer 4

フォームは、フォーム内の要素に送信するように設計されています。 action = "index.php＃form-anchor"をaction = "index.php"に変更してください