網頁不刷新

Question

後刪除表單數據我有一個網站，需要兩個文本輸入和兩個無線輸入（一個無線輸入目前沒有工作的一個形式，因爲我無法弄清楚如何讓他們兩個，而不是打印一個覆蓋另一個）。點擊提交後，表單下方的信息帖子。我試圖做到這一點，當頁面刷新時，以前輸入的信息不會消失。有沒有簡單的方法來實現這一點？

我聽說過設置回報的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，則數據泄露的可能性很高。