网页不刷新

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，则数据泄露的可能性很高。