エラーや送信時にポップアップが消えて再び表示される理由を理解できません

Question

ウェブサイトにサインアップするためのポップアップを書きました。ユーザーが必要な情報をすべて提供できなかった場合、ポップアップは表示されなくなりますが、エラーメッセージが表示されたままになります。同様に、ユーザーがすべての情報を提供して送信をクリックすると、メッセージは正常に送信されますが、ポップアップが消えてから成功メッセージが表示されます。ユーザーが閉じるをクリックすると、ポップアップが閉じて、必要なように消えてしまいます。

私はコードを書き直してきましたが、なぜそれが消えてから再び出現するのか分かりません。そこにとどまり、エラーメッセージまたは成功メッセージのいずれかを表示し、ユーザーが「閉じる」をクリックしたときにのみ消えるようにします。ここには、HTML、CSS、JS、PHPのコードがあります。

ここにはwebsiteがありますので実際に見ることができます。

私はすべてのアドバイスを感謝します！おかげ

HTML

<?php include $_SERVER['DOCUMENT_ROOT']. '/php/signup-popup.php'; ?> 
     <div id="pop-wrapper"> 
    <!-- Popup Div Starts Here --> 
    <div id="popupContact"> 
    <!-- Contact Us Form --> 
       <form action="#" id="form" method="post" name="form"> 
     <h2 id="popup-h2">Join the Civil War Digital Digest</h2> 
     <hr> 
     <input id="name" name="name" placeholder="Name" type="text" value="<?php echo htmlspecialchars($_POST['name']);?>"> 
     <input id="email" name="email" placeholder="Email" type="text" value="<?php echo htmlspecialchars($_POST['email']);?>"> 
     <textarea id="msg" name="message" placeholder="Message"><?php echo htmlspecialchars($_POST['message']);?></textarea> 
        <?php echo "<p id='error-message' class='text-danger'>$errError</p>";?> 
        <?php echo $result; ?> 
        <button id="submit" name="submit" type="submit" value="Send">Send</button> 
     <br> 
     <button onclick="hide()" id="close">Close</button> 
       </form> 
    </div> 
    <!-- Popup Div Ends Here --> 
     </div> 

Javascriptを

function show() { 
    if(sessionStorage.getItem("close") == null){ 
     document.getElementById('pop-wrapper').style.display = "block"; 
    } 
    else { 
     document.getElementById('pop-wrapper').style.display = "none"; 
    }   
} 

    function hide(){ 
     sessionStorage.setItem("close", 1); 
     document.getElementById('pop-wrapper').style.display = "none"; 
    } 


    window.onload=function(){ 
     setTimeout(function(){ 
      show(); 
     }, 500); 
    } 

PHP

CSS

/* popup header color #394650 */ 
     /*font IM Fell DW Pica */ 

     /*---------------------------------------------- 
     CSS settings for HTML div Exact Center 
     ------------------------------------------------*/ 
     #pop-wrapper { 
      width:100%; 
      height:100%; 
      opacity:.99; 
      top:0; 
      left:0; 
      display:none; 
      position:fixed; 
      background-color:#313131; 
      overflow:auto; 
     } 

      div #popupContact { 
       position:absolute; 
       left:50%; 
       top:17%; 
       margin-left:-202px; 
       font-family:'IM Fell DW Pica', serif; 
      } 

      form { 
           width: 450px; 
           height: 680px; 
       /*max-width:300px; 
       min-width:250px;*/ 
       padding:10px 50px; 
       border:2px solid gray; 
       border-radius:10px; 
       font-family:raleway; 
       background-color:#fff; 
      } 

      #error-message { 
       /*margin-top:30px;*/ 
           font-size: 18px !important; 
      } 

      #popup-h2 { 
       background-color:#394650; 
       padding:20px 35px; 
       margin:-10px -50px; 
       text-align:center; 
       border-radius:10px 10px 0 0; 
       color: #fff; 
      } 
      hr { 
       margin:10px -50px; 
       border:0; 
       border-top:1px solid #ccc; 
      } 
      input[type=text] { 
       width:82%; 
       padding:10px; 
       margin-top:30px; 
       border:1px solid #ccc; 
       padding-left:40px; 
       font-size:16px; 
       font-family: raleway; 
      } 
      #name { 
       background-repeat:no-repeat; 
       background-position:5px 7px; 
      } 
      #email { 
       background-repeat:no-repeat; 
       background-position:5px 7px; 
      } 
      textarea { 
       background-repeat:no-repeat; 
       background-position:5px 7px; 
       width:82%; 
       height:95px; 
       padding:10px; 
       resize:none; 
       margin-top:30px; 
       border:1px solid #ccc; 
       padding-left:40px; 
       font-size:16px; 
       font-family:raleway; 
       margin-bottom:30px; 
      } 
      #submit, #close { 
       text-decoration:none; 
       width:100%; 
       text-align:center; 
       display:block; 
       background-color:#394650; 
       color:#fff; 
       border:1px solid #fff; 
       padding:10px 0; 
       font-size:20px; 
       cursor:pointer; 
       border-radius:5px; 
      } 
      span { 
       color:red; 
       font-weight:700; 
      } 
      button { 
       width:10%; 
       height:45px; 
       border-radius:3px; 
       background-color:#cd853f; 
       color:#fff; 
       font-family:'IM Fell DW Pica', serif; 
       font-size:18px; 
       cursor:pointer; 
      } 

Answer 1

フォームのサブミット要求は、基本的にページを再ロードしてwindow.onload関数を再起動します。