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

小编典典

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

javascript

我有两个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>

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

阅读 1516

2020-05-01

共1个答案

小编典典

如果没有选择使用服务器端编程（例如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

2020-05-01