时间戳

首页 > 解决方案 > 如何在单独的 html 页面上显示来自提交表单的计算值？

javascript - 如何在单独的 html 页面上显示来自提交表单的计算值？

问题描述

所以我创建了一个提交表单，它将根据输入的内容计算最终值。当用户单击按钮时，我希望能够在单独的页面上显示此值。

我最初尝试在单击按钮时在同一页面上显示该值。这行得通，但是我还没有弄清楚单击此按钮时如何在另一个页面上显示它。我试图弄清楚如何使用 sessionStorage 来实现这一点，但我认为我没有正确使用它。此时，单击按钮会将用户发送到第二页，但最终值并未显示在那里。我对编码非常陌生，因此感谢您的帮助！

第 1 页

function computeval(){

    var distance1 = document.getElementById('distance1').value;
    var distance2 = document.getElementById('distance2').value;
    var hotel = document.getElementById('hotel').value;
    var emair = (distance1 * 0.0665).toFixed(2);
    var emland = emair + (distance2 * 0.1809).toFixed(0);
    var totalem = emland + (hotel * 19.2).toFixed(0); totalem.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
    tot=document.getElementById('totalem').innerHTML = "Total Emissions (kg) = "+totalem; 
} 

function handleSubmit () {
    
    localStorage.setItem('em', tot);  
}

第 1 页 HTML

<form action="result.html" method="POST">
  <button type="submit" class="btnop" onclick="handleSubmit()" >Submit</button>
</form>

第 2 页 JS

localStorage.getItem('em');

第 2 页 HTML

<body>
        <h1>
            Result Page
        </h1>

标签： javascript

解决方案

这是因为 sessionStorage 仅对正在创建的页面/选项卡有效，并在关闭时被清除。对于您的情况，您需要改用 localStorage，它可以跨页面访问。像这样：

function handleSubmit () {    
    localStorage.setItem('em', tot);  
}

来源：https ://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

推荐阅读