html - 如何在 2 个 html 页面之间传输表单数据?
问题描述
我知道这个问题在这里被问了很多,但我对编程很陌生,对 HTML 也很陌生。因此,已经提出的问题对我没有帮助,我宁愿需要一个简短的代码修复。我有这两个 HTML 文件,我想做的就是在输出 HTML 的文本字段中显示来自输入 HTML 的输入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input</title>
</head>
<body>
<div id="top">
<div id="headline">Input Overlay</div>
<form id="formOverlay">
<div id="numberOption"><label for="numberOption">Enter a number between 1 and 10:</label>
<input type="number" name="numberOption" id="numberBlock" min="1" max="10">
</div>
<div id="dropDownSelect"><label for="dropDownSelect">Select a value:</label>
<select name="dropSelectBlock" id="dropSelectBox">
<option value="Select a value">select a value:</option>
<option value="in progress">a</option>
<option value="in progress">b</option>
</select>
</div>
</form>
</div>
<a href="link_to_testOutput.html">
<button type="button" id="ok-button">OK</button> </a>
<button form="formOverlay" type="reset" id="reset-button">Reset</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Output</title>
</head>
<body>
<div id="top">
<div id="headline">Output</div>
<div id="currentInput">Current input:</div>
<textarea id="currentInputBox" name="currentInfoBox" rows="2" cols="50">Number:
Value: </textarea>
</div>
<a href="link_to_testIput.html">
<button type="button" id="back-button">Back</button> </a>
</body>
</html>
解决方案
只需将表单提交到下一页:
<div id="top">
<div id="headline">Input Overlay</div>
<form id="formOverlay" method="get" action="link_to_testOutput.html">
<div id="numberOption"><label for="numberOption">Enter a number between 1 and 10:</label>
<input type="number" name="numberOption" id="numberBlock" min="1" max="10">
</div>
<div id="dropDownSelect"><label for="dropDownSelect">Select a value:</label>
<select name="dropSelectBlock" id="dropSelectBox">
<option value="Select a value">select a value:</option>
<option value="in progress A">a</option>
<option value="in progress B">b</option>
</select>
</div>
<button id="ok-button">OK</button>
<button type="reset" id="reset-button">Reset</button>
</form>
</div>
第2页
window.addEventListener("load", function() {
const url = new URL("https://yourserver.com/link_to_testOutput.html?dropSelectBlock=in%20progress B&numberOption=9") // new URL(location.href)
document.getElementById("currentInputBox").value = `Number:${url.searchParams.get("numberOption")}\nValue: ${url.searchParams.get("dropSelectBlock")}`
})
<div id="top">
<div id="headline">Output</div>
<div id="currentInput">Current input:</div>
<textarea id="currentInputBox" name="currentInfoBox" rows="2" cols="50"></textarea>
</div>
当测试改变
const url = new URL("https://....") // new URL(location.href)
至
const url = new URL(location.href);
推荐阅读
- r - 如何使用 dplyr 估计多个类别的 10% 上限值和下限值的平均值?
- python - Manim:创建后更改文本大小
- c# - EF 创建额外的外键列
- c++ - 缩写函数模板的默认参数
- windows - 批处理脚本以递归方式将字符串附加到文件名(如果不存在)
- java - 在自定义视图中获取 LinearLayout 参考
- php - PHP/HTML 不对齐
- xamarin.forms - Xamarin Forms w/ Mobile Blazor Bindings - 如何在 Blazor 应用程序中为 Android / iOS 项目中定义的类指定依赖项注入
- python - 计算具有上限和下限的 a/b 测试的置信度
- apache-kafka - TwitterSourceConnector 必须是 SourceConnector 的子类