Webseite, um Formulardaten nach der Aktualisierung nicht zu löschen

Question

Ich habe ein Formular auf einer Website, die zwei Texteingänge und zwei Radioeingänge erfordert (ein Radioeingang funktioniert derzeit nicht, weil ich nicht herausfinden kann, wie sie beide beide zum Drucken bekommen von einem, der den anderen überschreibt). Wenn Sie auf "Senden" klicken, werden die Informationen unter dem Formular angezeigt. Ich versuche es so zu machen, dass beim Aktualisieren der Seite die zuvor eingegebenen Informationen nicht verschwinden. Gibt es einen einfachen Weg, dies zu erreichen?

Ich habe über die Einstellung von Return onsubmit = false gehört, aber bisher keinen Erfolg gehabt.

<!--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

entweder die Informationen auf dem lokalen Speicher speichern oder das onsubmit-Ereignis abfangen (bearbeiten: als Ergebnis, Formularübergabe löst js-Funktion aus, aber nicht erneutes Laden der Seite).

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

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

Sie könnten immer Ajax für Formularübermittlung verwenden, ohne nachzuladen.

Answer 2

Sie die Daten im Browser lokaler Speicherung und beim Laden der Seite nimmt die Daten aus dem lokalen Speicher und in erforderlichen Feldern speichern können. Löschen Sie die lokal gespeicherten Daten immer, sobald das Formular erfolgreich gesendet wurde. Achten Sie darauf, keine persönlichen Daten zu speichern, da die Gefahr besteht, dass Daten verloren gehen, wenn es sich um einen gemeinsam genutzten PC handelt.