将表单数据传递到另一个 HTML 页面 [英] passing form data to another HTML page
问题描述
我有两个 HTML 页面:form.html 和 display.html.在form.html中，有一个表单:
表单数据被发送到 display.html.我想在display.html中显示和使用表单数据serialNumber，如下图:
<div id="写入"><p>序列号为:</p><脚本>功能显示(){document.getElementById("write").innerHTML = serialNumber;}
那么如何将 serialNumber 变量从 form.html 传递到 display.html 以便 display.html 中的上述代码将显示序列号并且 JavaScript 函数 show() 获取 serialNumber 来自第一个 HTML?
如果您无法选择使用服务器端编程，例如 PHP，您可以使用查询字符串或 GET 参数.
在表单中添加一个method="GET"属性:
当他们提交此表单时，用户将被定向到包含 serialNumber 值作为参数的地址.类似的东西:
http://www.example.com/display.html?serialNumber=XYZ然后您应该能够使用 window.location.search 值从 JavaScript 解析查询字符串 - 它将包含 serialNumber 参数值:>
//来自 display.htmldocument.getElementById("write").innerHTML = window.location.search;//你将不得不解析//要提取的查询字符串//需要的参数另见 JavaScript 查询字符串.
<小时>另一种方法是在提交表单时将值存储在 cookie 中，并在 display.html 页面加载后再次从 cookie 中读取它们.
另见如何使用 JavaScript 在另一个页面上填写表单.
I have two HTML pages: form.html and display.html. In form.html, there is a form:
<form action="display.html">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
The form data is sent to display.html. I want to display and use the form data serialNumber in display.html, as shown below:
<body>
<div id="write">
<p>The serial number is: </p>
</div>
<script>
function show() {
document.getElementById("write").innerHTML = serialNumber;
}
</script>
</body>
So how can I pass the serialNumber variable from form.html to display.html so that the above code in display.html will show the serial number and the JavaScript function show() gets the serialNumber from the first HTML?
If you have no option to use server-side programming, such as PHP, you could use the query string, or GET parameters.
In the form, add a method="GET" attribute:
<form action="display.html" method="GET">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
When they submit this form, the user will be directed to an address which includes the serialNumber value as a parameter. Something like:
http://www.example.com/display.html?serialNumber=XYZ
You should then be able to parse the query string - which will contain the serialNumber parameter value - from JavaScript, using the window.location.search value:
// from display.html
document.getElementById("write").innerHTML = window.location.search; // you will have to parse
// the query string to extract the
// parameter you need
See also JavaScript query string.
The alternative is to store the values in cookies when the form is submit and read them out of the cookies again once the display.html page loads.
See also How to use JavaScript to fill a form on another page.
这篇关于将表单数据传递到另一个 HTML 页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
