Having problems with my very basic HTML static page generator

Question

I am trying to create a new HTML page from a form and some javascript. The form is much longer than this, but I figured that if I gave you guys 2 text inputs I can take it from there. I am running into a problem where I cannot retrieve the value of my forms and send it on to my new page. My new page won't show anything because it thinks that my forms are null, or that they don't exist possible. Which is probably why it returns undefined. I'm completely stuck here and I have no idea what to do as far as setting up the new page from my form goes.

I need help with getting newPage.html to display my title and subtitle.

Here is js:

var title = document.createElement("h1");
var titleForm = document.getElementById("title");
var subTitle = document.createElement("h3");
var subtitleForm = document.getElementById("subtitle");
var myDiv = document.getElementById("container");
function getElements() {
    //set the title
   var titleNode = document.createTextNode(titleForm.value);
   title.appendChild(titleNode);

   //set the subtitle optionally
   var subtitleNode = document.createTextNode(subtitleForm.value);
   subTitle.appendChild(subtitleNode);
}

Here is the original HTML page:

<body>
<h1>Create A New Webpage Using This Form</h1>
<form id="form">
    <label>
        Title: 
        <input type="text" name="title" id="title" value="title">
    </label><br><br>
    <label>
        Subtitle:  
        <input type="text" name="subtitle" id="subtitle" value="subtitle">
    </label><br><br>
    <input type="button" value="Generate Page" onclick="window.open('newPage.html');">
</form>
<script type="text/javascript" src="pageGenerator.js"></script>
<script>getElements();</script>
</body>

Here is the page that I want to create:

<body>
<div id="container">
<ul id="myList"></ul></div>
<script type="text/javascript" src="pageGenerator.js"></script>
<script>setElements();</script>
</body>

I'm not looking for you to complete this for me, but just a little bit of guidance. Thanks.

Looks like you should be doing this on the server. If I understand, you want the client to create HTML then open it in the browser? Are you going to have the client generate the HTML then send it to the server to be served back? It's not clear how this is supposed to work. For example, what do you have in newPage.html? — Nathan K, Feb 24 '16 at 14:22
I guess a better way to clarify it on my end would be to say: Is it possible to do this without sending the info to the server? Can I have all of the info local and still achieve my goal of creating a webpage from my form? — Griffin Obeid, Feb 24 '16 at 14:26
See this answer: http://stackoverflow.com/a/35027577/5941574 Basically you can either use a GET request so the data is in the URL which you can then parse or you can use some form of local storage, depending on browser support. But I still don't know what you mean by "create." This webpage won't be there when they come back unless they bookmark it or share the URL with others (not if you use local storage). — Nathan K, Feb 24 '16 at 14:31
This is just a homework assignment. It doesn't have to be there permanently — Griffin Obeid, Feb 24 '16 at 14:38
Let me rephrase: I'm not able to take the value of my form even when it is hardcoded (like above ). I would like my javascript to take that value and turn the value of title into an
on newPage.html. — Griffin Obeid, Feb 24 '16 at 14:43

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

It sounds like you want JavaScript on one page to read from JavaScript on another page. That's not possible on its own. You can't define var a = 1 on somePage.html then read that variable when the user's browser loads newPage.html.

You'll need to involve something else, such as the URL or local storage: https://stackoverflow.com/a/35027577/5941574

Query Parameters

One option is to make a GET request to newPage.html with whatever values you want include as query parameters in the request. Then newPage.html will contain a script that parses the URL to get the parameters and builds and inserts HTML into the document based on the values it finds in the URL.

Local Storage or Cookies

This works in pretty much the same way as the other method except instead of getting your values from the URL, it is saved to the user's computer with either cookies or local storage.

Server Side

A third option of course is to send the user's selections to a server and have the server build and serve the resulting page.

Ok so something like
Then I would parse the URL on newPage.html to retrieve the values, is that correct? — Griffin Obeid, Feb 24 '16 at 15:02
Essentially, yes. You would construct the HTML needed using JavaScript based on whatever it is you need to do with those values, then append it to the page. — Nathan K, Feb 24 '16 at 15:05

Having problems with my very basic HTML static page generator

on newPage.html.

1 Answers1

Query Parameters

Local Storage or Cookies

Server Side