How to dispaly values from a different html page using javascript?

Question

I have the following code below:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="OrderUp.css">
<title>OrderUp</title>
</head>
 <body>


 <form onsubmit="return results();" method="post" action="results.html" >  
 Name : <input name = "name" type= "text" id="name">
 <br>
 <input value = "Submit" type = "submit" >
 </form>

 </body>
 </html>

Another HTML page:

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="OrderUp.css">
<title>Results</title>
</head>
 <body>
 <h2> Your Form Has Been Submitted </h2>

 <script type="text/javascript">
 function results() {
 var name = document.getElementbyId('name').value;
 document.write(name);
 }
 </script>

 </body>
 </html>

I am trying to pass on the value 'name' and retrieve it on a different html page (results.html). How do I accomplish this? I am not sure what I am doing wrong. Please help. Thank you!

You cant just invent things? Why do you think that you can somehow call a function on another page that is not loaded yet? — Jonas Wilms, Apr 09 '18 at 16:13
There is many ways of doing this but it will be hard to help you if there is clearly some fundamental knowledge missing. — Nope, Apr 09 '18 at 16:17
check [Pass parameter from one html page to another another using query string](https://stackoverflow.com/questions/18738320/pass-parameter-from-one-html-page-to-another-another-using-query-string), Perhaps it will help you. — Sphinx, Apr 09 '18 at 16:18

score 2 · Answer 1 · answered Apr 09 '18 at 16:26

pass the variable in the url using GET like :

 <form method="get" action="result.html" >  
    Name : <input name = "name" type= "text" id="name">
    <br>
    <input value = "Submit" type = "submit" >
 </form>

and retrieve it in the other page like :

<h2> Your Form Has Been Submitted </h2>
<script>
   let params = (new URL(document.location)).searchParams;
   let name = params.get("name");

   console.log(name) // this is your variable
   document.querySelector('h2').innerText += name;
</script>

score 1 · Answer 2 · answered Apr 09 '18 at 16:21

You cannot simply take a function from one html and put it into another. Using pure JavaScript and HTML the best way to accomplish this would be to make a JavaScript file, put the function there and load it on both pages. That way if you edit the function in one place, it will change in both.

The code would look like this:

Page 1:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="OrderUp.css">
<title>OrderUp</title>
</head>
 <body>


 <form onsubmit="return results();" method="post" action="results.html" >  
 Name : <input name = "name" type= "text" id="name">
 <br>
 <input value = "Submit" type = "submit" >
 </form>

 <script type="text/javascript" src="results.js"></script>

 </body>
 </html>

Page 2:

  <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="OrderUp.css">
<title>Results</title>
</head>
 <body>
 <h2> Your Form Has Been Submitted </h2>

 <script type="text/javascript" src="results.js"></script>

 </body>
 </html>

results.js

  function results() {
 var name = document.getElementbyId('name').value;
 document.write(name);
 }

score 1 · Accepted Answer · answered Apr 09 '18 at 16:53

One way is: you could use the 'get' method on the form, and not 'post':

index.html

<!DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8">
 <title>OrderUp</title>
</head>

<body>
 <!-- Use method 'GET', not 'POST', to pass the form values via the url in the address bar -->
 <form method="GET" action="results.html"> 
  Name :
  <input name="name" type="text">
  <br>
  <input value="Submit" type="submit">
 </form>

</body>

</html>

Then, in result.html, use javascript to extract the name value from the page url.

result.html

<!DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8">
 <title>Results</title>
</head>

<body>
 <h2> Your Form Has Been Submitted </h2>

 <span>Name Submitted: </span>
 <span id="name-label"></span>

 <script type="text/javascript">

  // Get the value passed in the url by the form
  var querystring = location.search;
  // => ?name=Roger

  // Remove the '?' at the beginning
  var nameValuePair = querystring.replace(/^\?/, '');
  // => name=Roger

  // Split into parts
  var parts = nameValuePair.split('=');

  // The name is the second value
  var name = parts[1];

  // Set the name in the HTML element.
  document.getElementById('name-label').innerHTML = name;

 </script>

</body>

</html>

score 0 · Answer 4 · answered Apr 09 '18 at 16:18

0

Probably the simplest would be to append it to the url:

  <script>
   function goToResults() {
     window.location = "results.html#" + document.getElementbyId('name').value;
   }

   document.getElementById("submit").onclick = goToResults;
 </script>
 <input id = "name" />
 <button id = "submit" > Submit </ button>

And on results.html just get it from the location:

 document.body.innerHTML += document.location.href.split("#")[1];

answered Apr 09 '18 at 16:18

Jonas Wilms

132,000
20
149
151

Why would you use the URL fragment over normal query string parameters? – André Dion Apr 09 '18 at 17:16

score 0 · Answer 5 · answered Apr 09 '18 at 16:30

You need a way to save the information you want to share between pages. There are many options for javascript each with pros and cons

use the uri hash: location.hash = myValue / var retrieveValue = location.hash;

use localstorage: localStorage.setItem("key", "value"); / localStorage.getItem("key");

also document.cookie is an option, (you can look that one up as it's slightly more involved to implement with many good answes already around)

How to dispaly values from a different html page using javascript?

5 Answers5