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

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

回答:

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


以上是 将表单数据传递到另一个HTML页面 的全部内容, 来源链接: utcz.com/qa/434177.html

回到顶部