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

ton*_*nga 46 html javascript forms

我有两个HTML页面:form.html和display.html.在form.html中,有一个表单:

<form action="display.html">
    <input type="text" name="serialNumber" />
    <input type="submit" value="Submit" />
</form>
Run Code Online (Sandbox Code Playgroud)

表单数据将发送到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>
Run Code Online (Sandbox Code Playgroud)

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

Ric*_*uen 35

如果您无法使用服务器端编程(例如PHP),则可以使用查询字符串或GET参数.

在表单中,添加一个method="GET"属性:

<form action="display.html" method="GET">
    <input type="text" name="serialNumber" />
    <input type="submit" value="Submit" />
</form>
Run Code Online (Sandbox Code Playgroud)

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

http://www.example.com/display.html?serialNumber=XYZ
Run Code Online (Sandbox Code Playgroud)

然后,您应该能够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
Run Code Online (Sandbox Code Playgroud)

另请参见JavaScript查询字符串.


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

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

  • @tonga有关处理查询字符串的示例和方法,请参阅[如何获取查询字符串值](http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values). (2认同)

Jos*_*ard 10

您需要从查询字符串中获取值(因为您没有方法集,默认情况下使用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;
}
Run Code Online (Sandbox Code Playgroud)


Wes*_*ima 6

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

在第一页上,您使用以下 JavaScript 代码片段来设置 localStorage:

<script>    
   localStorage.setItem("serialNumber", "abc123def456");
</script>
Run Code Online (Sandbox Code Playgroud)

在第二页上,您可以使用以下 JavaScript 代码片段检索该值:

<script>    
   console.log(localStorage.getItem("serialNumber"));
</script>
Run Code Online (Sandbox Code Playgroud)

在 Google Chrome 上,您可以按 F12 > 应用程序 > 本地存储来可视化这些值。

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