在构建多页交互式表单时，一个常见挑战是如何在页面之间有效地传递和维护用户输入的数据。当用户从一个页面导航到下一个页面时，前一页的某些数据（例如，用户邮箱、测试类型）可能会在后续提交中丢失。本文将深入探讨这一问题，并提供一个基于url参数和隐藏输入字段的解决方案，以确保数据在整个多页流程中保持完整。
问题分析：数据丢失的根源
用户在多页表单中遇到的数据丢失问题，通常源于对HTML表单提交机制的误解。当一个表单被提交时，FormData对象只会包含当前HTML页面中
请注意，为了清晰起见，我们将 getUrlParameter 函数和 DOMContentLoaded 监听器直接放在了页面3的
步骤三：修改提交函数以利用 FormData
现在，由于 email 和 testType 已经作为隐藏字段存在于页面3的表单中，goPFour 函数无需额外修改即可正确获取它们。FormData 会自动收集所有带有 name 属性的表单元素的值。
页面3的JavaScript (evalportalp1.js 或内联脚本)：
// goPFour 函数保持不变，因为FormData现在可以获取到隐藏字段的值
function goPFour(event) {
event.preventDefault();
const formData = new FormData(event.target); // event.target 是当前的表单元素
const userEmail = formData.get("email"); // 现在可以正确获取到值
const testType = formData.get("testType"); // 现在可以正确获取到值
const testTime = formData.get("testTime");
if (testTime === "10" || testTime === "20") {
// 构建URL时，确保所有参数都包含在内
window.location.href = "evalportalv4.html?" +
"email=" + userEmail +
"&testType=" + testType +
"&testTime=" + testTime;
} else {
alert("Please pick a valid Option");
}
return false;
}
// goPThree 函数（假定这是从页面2提交到页面3的函数）
// 此函数无需修改，因为它已成功将数据传递到页面3的URL
function goPThree(event) {
event.preventDefault();
const formData = new FormData(event.target);
const userEmail = formData.get("email");
const testType = formData.get("testType");
if (testType === "voip") {
window.location.href = "evalportalv3.html?" + "email=" + userEmail + "&testType=" + testType;
} else if (testType === "bandwidth") {
window.location.href = "evalportalb3.html?" + "email=" + userEmail + "&testType=" + testType;
} else {
alert("Please pick a valid Option");
}
return false;
}通过上述修改，当用户从页面3提交表单时，goPFour 函数将能够从 formData 中获取 email、testType 和 testTime 的所有正确值，并将它们一并传递到页面4的URL中。
注意事项与最佳实践
- 数据安全性： 通过URL参数传递数据不适合敏感信息（如密码、个人身份信息），因为它们会暴露在浏览器历史记录、服务器
