如何在函数间传递Form表单值 校验后跳转并在成功页展示数据

你当前的代码无法实现需求的核心原因是：浏览器页面跳转后，前一个页面的JS运行上下文会被完全销毁，你在check函数里定义的变量x只存在于index.html的运行环境中，success.html加载后无法访问到前一页的变量。另外你在表单提交时返回了false，也阻止了表单默认的提交传值行为。

下面给两种可直接使用的修复方案：

方案1：通过URL参数传递数据（轻量单字段首选） #

修改后的index.js代码 #

function check() {
  // 显式声明变量，避免隐式全局变量问题
  const x = document.forms.myform.fname.value;
  if (x == "") {
    alert("First Name should be filled out!");
    return false;
  } else {
    alert("Login Successful");
    // 把表单值编码后拼接到跳转URL的查询参数里
    window.location.href = `success.html?fname=${encodeURIComponent(x)}`;
    return false;
  }
}

// success页面加载时读取URL参数
function showSubmitName() {
  const urlParams = new URLSearchParams(window.location.search);
  const fname = urlParams.get('fname');
  // 兼容无参数场景
  if (fname) {
    document.getElementById('fn').innerHTML = fname;
  }
}

需同步修改的success.html代码 #

把body的onload事件绑定的函数名替换为新的函数名，避免和浏览器全局window.name属性冲突：

<body onload="showSubmitName()">
  <h1>Your form is submitted successfull.</h1>
  <p>Thanks</p>
  <div id="fn">Name Here</div>
  <hr width="50%">
</body>

index.html代码无需修改。

方案2：通过localStorage本地存储传递（适合多字段、复杂数据） #

修改后的index.js代码 #

function check() {
  const x = document.forms.myform.fname.value;
  if (x == "") {
    alert("First Name should be filled out!");
    return false;
  } else {
    alert("Login Successful");
    // 把数据存入本地存储
    localStorage.setItem('submit_fname', x);
    window.location.href = "success.html";
    return false;
  }
}

function showSubmitName() {
  // 从本地存储读取数据
  const fname = localStorage.getItem('submit_fname');
  if (fname) {
    document.getElementById('fn').innerHTML = fname;
    // 读取后移除存储，避免数据残留
    localStorage.removeItem('submit_fname');
  }
}

同样需要把success.html的onload事件修改为onload="showSubmitName()"，无需修改其他代码。

内容的提问来源于stack exchange，提问作者Rishu Singh