リフレッシュ後にフォームデータを削除しないWebページ

Question

2つのテキスト入力と2つのラジオ入力が必要なフォームをWebサイトに作成しました（いずれのラジオ入力も現在は機能しません。 1つは他のものを上書きする）。提出を打つと、情報はフォームの下に投稿されます。私はそれがページがリフレッシュされるとき、以前に入力された情報が消えないようにしようとしています。これを達成する簡単な方法はありますか？

return onsubmit = falseの設定について聞いたことがありますが、それまでのところ成功していません。

<!--COMMENTING FORM--> 
 
       <div> 
 
        <div id="getdata"> 
 
        <form id="form1" onsubmit="return confirmdata(false)"> 
 

 
         <!--Input (text) asking for input of name--> 
 
         <p><b>Name:</b><br><input type="text" name="nameValue" value="" id="nameValue"></p> 
 

 
         <!--Input (radio) asking for type of output: 
 
         <p><b>Type of Event:</b></p> 
 
         <input type="radio" name="eventType" value="Food"> Food</br> 
 
         <input type="radio" name="eventType" value="Study"> Study</br> 
 
         <input type="radio" name="eventType" value="Event"> Event</br> 
 
         <input type="radio" name="eventType" value="Danger"> Danger</br> 
 

 
         TO DO FIX LATER --> 
 

 
         <!--Input (radio) asking for location: --> 
 
         <br> 
 
         <p><b>Location:</b></p> 
 
         <input type="radio" name="locationType" value="Library West"> Library West</br> 
 
         <input type="radio" name="locationType" value="Smathers Library"> Smathers Library</br> 
 
         <input type="radio" name="locationType" value="Marston Library"> Marston Library</br> 
 
         <input type="radio" name="locationType" value="Turlington Plaza"> Turlington Plaza</br> 
 

 
         <!--Input (text) asking for input of description--> 
 
         <br> 
 
         <p><b>Description:</b><br><input type="text" style="width:200px; height:50px;" name="desValue" value="" id="desValue"></p> 
 

 
         <!--submit button--> 
 
         <p><input type="submit" name="myButton" value="Submit!"> 
 
         <input type="reset" value="Reset Form"></p> 
 
        </form> 
 

 
        </div> 
 

 
        <div id="confirm"> 
 
        </div> 
 

 
       </div> 
 
       </body> 
 
       <!--COMMENTING FORM END--> 
 

 
       <!-- COMMENTING FORM SCRIPT --> 
 
       <script type="text/javascript"> 
 
       var txt1 = document.getElementById('nameValue'); 
 
       var types = document.getElementsByName('eventType'); 
 
       var types = document.getElementsByName('locationType'); 
 
       var txt2 = document.getElementById('desValue'); 
 

 
       document.getElementById("form1").addEventListener("submit", confirmdata); 
 

 
       function confirmdata(event) { 
 
        event.preventDefault(); 
 
        var nameValue = txt1.value; 
 
        var selected = 'none'; 
 
        var desValue = txt2.value; 
 

 
        for (var i = 0; i < types.length; i++) { 
 
         if (types[i].checked === true) { 
 
          selected = types[i].value; 
 
         } 
 
        } 
 
         if (selected !== 'none' && nameValue !== '') { 
 
          //document.getElementById("confirm").innerHTML += '<p><b>Name:</b> ' + nameValue + '</p>'; 
 
          //document.getElementById("confirm").innerHTML += '<p><b>Event Type:</b> ' + selected + '</p>'; 
 
          //document.getElementById("confirm").innerHTML += '<p><b>Additional Details: </b>' + desValue + '</p>'; 
 
          document.getElementById("confirm").innerHTML += '<p> User <b>' + nameValue + '</b> has an event located at <b>' + selected + '</b>. <br><b> Additional details: </b>' + desValue + '</p>'; 
 
          document.getElementById("confirm").innerHTML += '<p><b>--------------------</b> ' + '</p>'; 
 
         } else { 
 
          alert('Invalid input'); 
 
         } 
 
         return false; 
 
       } 
 
       </script> 
 
       <!-- COMMENTING FORM SCRIPT END --> 
 

 
       
 
      
 
       </form> 
 
      </div> 
 
      </div>

Answer 1

は、ローカルストレージに情報を格納するか、onsubmitイベントを傍受する（編集：フォーム提出によってjs機能がトリガーされますが、ページリロードは行われません）。

<form onsubmit="return myFunction()"> 
    <!-- put form elements here --> 
</form> 

<script> 
function myFunction(){ 
    //do stuff here 
    return false 
} 
</script> 

リロードせずにフォームの提出に常にajaxを使用できます。

Answer 2

あなたはブラウザのローカルストレージにデータを保存し、ページのロードに必要なフィールドでのローカルストレージと場所からデータを取ることができます。フォームが正常に送信されると、ローカルに保存されたデータを常にクリアします。個人データを保存しないように注意してください。共有PCの場合は、データ漏洩の可能性が高いです。