将表单数据传递到另一个 HTML 页面

IT技术 javascript html forms
2021-01-25 18:35:15

我有两个 HTML 页面：form.html 和 display.html。在form.html中，有一个表单：

<form action="display.html">
    <input type="text" name="serialNumber" />
    <input type="submit" value="Submit" />
</form>

表单数据被发送到 display.html。我想serialNumber在display.html中显示和使用表单数据，如下图：

<body>
    <div id="write">
        <p>The serial number is: </p>
    </div>
    <script>
    function show() {
        document.getElementById("write").innerHTML = serialNumber;
    }
    </script>
</body>

那么如何将serialNumberform.html 中的变量传递给 display.html，以便 display.html 中的上述代码将显示序列号，而 JavaScript 函数 show()serialNumber从第一个 HTML 中获取序列号？

6个回答

如果您无法选择使用服务器端编程（例如 PHP），则可以使用查询字符串或 GET 参数。

在表单中，添加一个method="GET"属性：

<form action="display.html" method="GET">
    <input type="text" name="serialNumber" />
    <input type="submit" value="Submit" />
</form>

当他们提交此表单时，用户将被定向到包含该serialNumber值作为参数的地址。就像是：

http://www.example.com/display.html?serialNumber=XYZ

然后，您应该能够serialNumber使用以下window.location.search值从 JavaScript解析查询字符串（将包含参数值）：

// from display.html
document.getElementById("write").innerHTML = window.location.search; // you will have to parse
                                                                     // the query string to extract the
                                                                     // parameter you need

另请参阅JavaScript 查询字符串。

另一种方法是在提交表单时将值存储在 cookie 中，并在display.html页面加载后再次从 cookie 中读取它们。

另请参阅如何使用 JavaScript 在另一个页面上填写表单。

@tonga - 我不确定他们会不会，但你应该试试看它是否有效。如果它不使用 cookie，请查看我链接到的第二个问题。Cookie 应该可以工作，但它们可能会更混乱，因为它们的生命周期比查询字符串参数更长。
2021-03-13 18:35:15
@tonga 请参阅如何获取查询字符串值的示例和处理查询字符串的方法。
2021-03-14 18:35:15
@Richard：我刚刚重试了它，最后它可以在我的手机上运行。我认为有些事情搞砸了，所以我最初没有看到解析的查询字符串。非常感谢。
2021-03-17 18:35:15
@tonga 几分钟前编辑过。尝试重新加载。
2021-03-21 18:35:15
@Boaz：谢谢。我去看看试试。
2021-04-03 18:35:15

您需要从查询字符串中获取值（因为您没有设置方法，默认情况下您使用 GET）

使用以下教程。

http://papermashup.com/read-url-get-variables-withjavascript/

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}
该代码导致我的浏览器错误！未找到您的文件
2021-03-25 18:35:15

另一种选择是使用“localStorage”。您可以在另一个页面中使用 javascript 轻松请求该值。

在第一页上，您使用以下 javascript 代码片段来设置 localStorage：

<script>    
   localStorage.setItem("serialNumber", "abc123def456");
</script>

在第二页上，您可以使用以下 javascript 代码段检索值：

<script>    
   console.log(localStorage.getItem("serialNumber"));
</script>

在 Google Chrome 上，您可以按 F12 > 应用程序 > 本地存储对值进行可视化。

来源：https : //www.w3schools.com/jsref/prop_win_localstorage.asp

<form action="display.html" method="get">
    <input type="text" name="serialNumber" />
    <input type="submit" value="Submit" />
</form>

在 display.html 中，您应该添加以下代码。

<script>
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var sn = getParameterByName('serialNumber');

document.getElementById("write").innerHTML = sn;

</script>

使用“Get”方法通过浏览器发送特定字段的值：

<form action="display.html" method="GET">
    <input type="text" name="serialNumber" />
    <input type="submit" value="Submit" />
</form>
其它你可能感兴趣的问题
上一篇Flask - 在按钮 OnClick 事件上调用 python 函数 下一篇这种做法在 JavaScript 中称为什么？