Question

我在网站上有一个表单，需要两个文本输入和两个无线电输入（一个无线电输入目前无法正常工作，因为我无法弄清楚如何让它们都打印而不是一个覆盖另一个） 。点击提交后，表单下方的信息发布。我试图这样做，以便刷新页面时，先前输入的信息不会消失。有没有一种简单的方法来实现这一目标？

我听说过设置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

您可以将数据存储在浏览器本地存储中，并在页面加载时从本地存储中获取数据并放在必填字段中。表格提交成功后，始终清除本地存储的数据。请确保不存储个人数据，如果它是共享PC，则数据泄漏的可能性很高。

Answer 2

将信息存储在本地存储上或拦截onsubmit事件（编辑：因此，表单提交会触发js函数，但不会页面重新加载）。

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

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

您可以随时使用ajax进行表单提交而无需重新加载。

刷新后不删除表单数据的网页

2 个答案: