Webpage to not delete form data after refresh

Question

I have a form on a website that requires two text inputs and two radio inputs (one radio input currently not working because I can't figure out how to get them both to print instead of one overwriting the other). Upon hitting submit, the information posts underneath the form. I am trying to make it so that when the page is refreshed, the previously entered information will not disappear. Is there a simple way to achieve this?

I have heard about setting return onsubmit=false but have had no success so far.

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

either store the information on local storage or intercept the onsubmit event (edit: as a result, form submission triggers js function, but not page reload).

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

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

You could always use ajax for form submission without reloading.