Question

我有两个html文件book.html和receive.html。我想使用从book.html表单输入的数据来更新receive.html。

当我在同一页面中同时拥有表格和收据时，我的代码有效。我希望“提交”按钮打开带有收据的新页面。我该如何仅使用javascript。

这是我的js代码

function alertName(){
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    var destination = document.getElementById("destination");
    var realD= destination.options[destination.selectedIndex].text;
    var dat = document.getElementById("date").value; 
    var location = document.getElementById("locate");
    var realL=  location.options[location.selectedIndex].text;  
    document.getElementById("disp-name").innerHTML= name;
    document.getElementById("disp-date").innerHTML= dat; 
    document.getElementById("disp-location").innerHTML= realL;
    document.getElementById("disp-destination").innerHTML= realD;
    document.getElementById("disp-email").innerHTML= email;
}
document.getElementById('button').addEventListener('click', alertName);

Answer 1

进一步了解LocalStorage

我将值存储在LocalStorage中，并在以后需要时检索它。

下面是我的代码，用于在一个HTML页面中存储数据：

 <!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>


  First name:<br>
  <input type="text" name="firstname" id="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" id="lastname" value="Mouse">
  <br><br>
 <button onclick="myFunction()">Submit</button>



<script>
function myFunction() {

// Check browser support
if (typeof(Storage) !== "undefined") {
  // Store
  localStorage.setItem("lastname", document.getElementById("lastname").value);
  localStorage.setItem("firstname", document.getElementById("firstname").value);
    console.log("Storaged successfully")
    location.href = "C:/test2.html";
}
}
</script>

</body>
</html>

并在另一个HTML页面中检索它：

    <!DOCTYPE html>
<html>
<body onload="myFunction()">

<h2>HTML Forms</h2>

  First name:<br>
  <input type="text" name="firstname" id="firstname">
  <br>
  Last name:<br>
  <input type="text" name="lastname" id="lastname">
  <br><br>




<script>
function myFunction() {

// Check browser support
if (typeof(Storage) !== "undefined") {
  // Retrieve
  document.getElementById("lastname").value = localStorage.getItem("lastname");
  document.getElementById("firstname").value = localStorage.getItem("firstname");
    console.log("Retrieved successfully")
}
}

</script>

</body>
</html>

希望获得帮助：）

如何从一个HTML页面获取数据以在提交时更新另一个页面

1 个答案: