CODEWITHSUNDEEP
htmlforms
Klippspringer
Klippspringer

Reputation: 99

How can I transfer form data between 2 html pages?

I know the question has been asked a lot here, but I'm very new to programming and very new to HTML in general. Therefore, the questions already asked did not help me, I would rather need a short code fix. I have these two HTML files and all I want to do is to display the input from the input HTML in the text field of the output 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>

Upvotes: 0

Views: 151

Answers (1)

mplungjan
mplungjan

Reputation: 177691

Just submit the form to the next page:

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

Page 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>

When tested change

 const url = new URL("https://....")  // new URL(location.href)

to

 const url = new URL(location.href);

Upvotes: 1

Related Questions