Question

我知道这个问题在这里问了很多，但我对编程很陌生，对 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>

Answer 1

只需将表单提交到下一页：

<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);

如何在 2 个 html 页面之间传输表单数据？

1 个答案: