HTMLフォームの再ロード時にsessionStorage変数を使用してエラーを受け取ります

Question

現在、ユーザーデータを受け取り、送信時にmySQLに渡すフォームを使用しています。それは何か誤りが適用される表示するために失敗した投稿に変更したい最初の段落を持っています。ユーザーに何が間違っているかを示すことができなかった場合、エラーをリフレッシュされたフォームに渡したいと思います。ここに私のオープニングディビジョンがあります。

<div id="formExplained"> 
    <h1>Title Here</h1> 
    <p>Content Here</p> 
</div> 

提出の私のスクリプトがfalseに私の$エラー変数を設定し、そのとき$errors == falseフォーム送信を続行することができます。私はPHPのさまざまなエラーをチェックし、エラーごとに1つずつ追加します。最後に私は

if($_POST['submit']){ 
    //variable to hold relavent error messages. Set to false 
      $error = false; 
    //check each form field for errors 
     if(!$title){ 
      $error .= $missingTitle; 
     }else{ 
      $title = filter_var($title, FILTER_SANITIZE_STRING); 
      $title = mysqli_real_escape_string($link, $title); 
     }//Check for Grocoordinates 
     if(!$lat || !$lng){ 
      $error .= $missingGeo; 
     }//etc 

私はmySQLのクエリをセットアップする前に私はエラーのチェックを行い、コードが存在する場合はそれを終了します。ここでも私はエラーをsessionStorageに渡し、エラーを含むdivをエコーし​​ます。

if($error){ 
      //pass errors from php to session Storage to display on reload 
      echo "<script>sessionStorage.setItem('error', '$error');</script>"; 
      echo "<div id='error' class='error'>$error;</div>"; 
      echo "<p>Here Is Proof that this is Executing</p>"; 
      die(); 
     } 

エラーを含むdivと段落は、両方ともページリロード時に完全に実行されます。それらは私のマップの一番下に表示されます。

上記のすべてのPHP提出コードを実行する別のJavaScriptで、私はsessionStorage変数をプルし、エラーを反映するために私のinnerHTMLを私の開始divから変更しようとします。

<script> 
    var error = sessionStorage.getItem('error'); 
    if(error){ 
     document.getElementById('formExplained').innerHTML = "<div class='error'><p>" + error + "</p></div>"; 
     } 
</script> 

このコードは、最初の投稿では正しく実行されませんが、2回目の投稿では、自分のフォームの上部にエラーが表示されます。エラーが発生する限り私が変更したものは、2リフレッシュの遅延後にのみ表示されるようです。

ページを確認するには、（http://www.sumoftruth.com/map/map.php）を使用してください。このフォームは「オファーシェルター」の下にあります

この泥沼から私を救い出すためのガイダンスは高く評価されます。

Answer 1

この問題を解決するには

Shahafさんが提案したように、私は自分のスクリプトの最後までセッション記憶チェックを移動する必要がありました。

if($error){ 
     //pass errors from php to session Storage to display on reload 
      echo "<script type='text/javascript'>sessionStorage.setItem('error', '$error');</script>"; 
     //Here is a script to pass the sessionStorage error variable to javascript variable 
      echo "<script>"; 
      echo "var error = sessionStorage.getItem('error');"; 
     //if any errors stored in sessionStorage, place them in main div 
      echo "if(error){"; 
     //write the error message into the main div in offerShelterForm 
      echo "document.getElementById('formExplained').innerHTML = \"<div class='error'><p>\" + error + \"</p></div>\";"; 
      echo "}"; 
      echo "</script>"; 
     //kill the rest of the php code 
      die(); 
     }