如何从表单中检索值以供以后使用？

Question

我使用 Javascript 和 html 创建了一个表单，它看起来像这样：function testResults (form) {    var TestVar = form.inputbox.value;    var formData = $('#vibhu').serialize();    formData = JSON.stringify(formData);    if (window.localStorage) {    localStorage.setItem('formData', formData);<h1 class="title">Create Event</h1><FORM NAME="myform" ACTION="" METHOD="GET"><BR>Event Name: <INPUT TYPE="text" NAME="name" VALUE=""><P>Date and Time: <INPUT TYPE="datetime-local" NAME="date" Value=""><P>Event Location: <INPUT TYPE="text" NAME="location" VALUE=""><P>Event Notes<INPUT TYPE="text" NAME="notes" VALUE=""><P>我试图在另一个网页上使用<script language="JavaScript">    document.getElementById("result").innerHTML = localStorage.getItem("myForm");}</script>如何才能检索此信息并将其作为事件在另一个页面上显示给用户？

Answer 1

像这样使用submitwithaction属性form

<form name="myform" action="./html2.html" method="GET">

Event Name: <input type="text" name="name" value=""/>

Event Date and Time: <input type="datetime-local" name="date" value=""/>

Event Location: <input type="text" name="location" value=""/>

Event Notes: <input type="text" name="notes" value=""/>

<input value="submit" type="submit"/>

</form>

当你点击提交按钮时，页面同时跳转到html2.html?name=xxx&date=xxx&location=xxx...

Answer 2

使用 localStorage 怎么样？

要存储项目，请使用localStorage.setItem("valuename", "data");.

要获得项目的价值，请使用localStorage.getItem("valuename");.

这是一个例子：

<FORM NAME="myform" ACTION="" METHOD="GET"><BR>

Event Name: <INPUT TYPE="text" NAME="name" VALUE="" id="input1"><P>

Event Date and Time: <INPUT TYPE="datetime-local" NAME="date" Value="" id="input2"><P>

Event Location: <INPUT TYPE="text" NAME="location" VALUE="" id="input3"><P>

Event Notes: <INPUT TYPE="text" NAME="notes" VALUE="" id="input4"><P>

<button onclick="myFunction()" type=submit>Submit</button>

</form>

<script>

   document.getElementById('input1').value = localStorage.getItem("EventName");

   document.getElementById('input2').value = localStorage.getItem("EventDateAndTime");

   document.getElementById('input3').value = localStorage.getItem("EventLocation");

   document.getElementById('input4').value = localStorage.getItem("EventNotes");

</script>

<script>

   function myFunction() {

      localStorage.setItem("EventName", document.getElementById('input1').value);

      localStorage.setItem("EventDateAndTime", document.getElementById('input2').value);

      localStorage.setItem("EventLocation", document.getElementById('input3').value);

      localStorage.setItem("EventNotes", document.getElementById('input4').value);

   }

</script>

这是一个现场演示：https ://codepen.io/marchmello/pen/eYpdmQb