How to create HTML elements and apply them to a different HTML file using Javascript?

Question

I am attempting to create a couple of web pages that will allow me to fill out a form on input.html and have the entered data appended to a different HTML file, index.html.

I have been searching for an answer for a couple of hours now and it might just drive me insane!

Here is some example code of what I'm trying to do:

HTML form input.hmtl:

<form>
   <label>
      Enter something:
      <input type="text" id="userinput" required>
   </label>
   <input type="submit" id="submit" value="submitted">
</form>

Javascript to get entered data and pass to index.html:

var userInput = document.querySelector("#userinput");
var submit = document.querySelector("#submit");

function addToIndex() 
{
   // create new element on index.html
}

submit.addEventListener("click", addToIndex, false);

HTML output file index.html:

<div id="contentstart">
   <!-- newly created element here -->
</div>

I have attempted using this solution, but Chrome's console gives me an error and tells me that newWindow is not a function. I just stumbled upon using the <iframe> element in a couple of answers but don't quite understand it yet (I'm a noob).

Thanks in advance!

Receipt of data is much more commonly handled by a server-side language such as PHP. JavaScript cannot receive post data, but it can receive GET data (i.e. data sent in the URL). Give some thought to whether you want the data receipt to happen over a page transition, or via a popup window, since that will inform which approach you take. — Mitya, Apr 26 '20 at 19:15
Are you looking for a way to share data without a server language? It could be done using URL fragments or browser storage. — wizardzeb, Apr 26 '20 at 20:19
@Utkanos I believe I want it to happen over a page transition so the entered data would be displayed along with other elements already in `index.html`. This wasn't supposed to take as long as it did (I was using this as a way to study for an exam, but was going a little further), how hard would it be to implement with PHP? — 7Pettay7, Apr 27 '20 at 00:48
@wizardzeb The original goal was to have the user enter data on the form, then javascript takes that data and creates new elements on `index.html` with it. If it's possible to do without learning another programming language I would love to hear the solution! — 7Pettay7, Apr 27 '20 at 00:52
@7Pettay7 With PHP this is trivial. Send the data from input.html over POST (ideally), then in index.html (which you'd need to rename index.php) you can put some simple PHP which receives the POST data and iterates over it. http://php.net/foreach — Mitya, Apr 27 '20 at 09:51
@Utkanos Interesting, I will definitely have to look into PHP! Thanks for the info! — 7Pettay7, Apr 27 '20 at 20:13

score 0 · Answer 1 · answered Apr 26 '20 at 19:06

For you to receive data from a form in a different file, you will need a server-side language like php. So the form will have this structure

<form action="external_file.php" method="get">
   <label>
      Enter something:
      <input type="text" id="userinput" name="user_input" required>
   </label>
   <input type="submit" id="submit" value="submitted">
</form>

Note the action="external_file.php and the name="user_input" attribute added to the input element. Then the file: external_file.php might have the following structure to receive the content from the form

<?php
$input = $_GET["user_input"];
//do something with $input
echo 'The data you entered is: ' . $input;
?>

So I see that the PHP file receives the user data, but can it be used to create new elements in a different HTML file? — 7Pettay7, Apr 27 '20 at 01:03

CanUver · Answer 2 · 2020-04-26T19:18:21.393

I showed you the way to start. The rest is up to you, you can do whatever you want to do. I hope you could help.

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>

        <form id ="form">
            <label>
               Enter something:
               <input type="text" id="userinput" required>
            </label>
            <input type="submit" id="submit" value="submitted">
         </form>


         <script>

    let form = document.getElementById("form");
    let userInput = document.getElementById("userinput");
    form.addEventListener("submit", submitForm) //this function will work when the form is submit

    function submitForm (e) {
        e.preventDefault() // this event will prevent page refresh when form submit
        let userInputValue = userInput.value; // userinput value 
        console.log(userInputValue);
        moveToAnotherPage(userInputValue); //we send the value we get from userinput to use in another function.
    }

    function moveToAnotherPage (value) {



          // Select the index2 html elements and add with innerhtml or something. 
//to do this, you may need to save the userinput value you received to localStorage and pull it from it. I suggest you look into localStorage .And if you know php, you can use it.

    }

         </script>


    </body>
    </html>

Code with no explanation is going to be of limited help to a noob. It's always best to explain your answer. — Mitya, Apr 26 '20 at 19:12
I've made my clearances and rearranged the codes. even if you're a noob, you need to know some basics. This isn't a tutorial course, it's a platform where mistakes are corrected.how can I explain more? Everything seems very clean and simple way. — CanUver, Apr 26 '20 at 19:18

score 0 · Accepted Answer · answered Apr 27 '20 at 02:10

The best option is to use a web server or a serverless implementation. Server code can be written in multiple languages. Some of the languages include PHP, NodeJS, and ASP.NET.

However, you can pass data using browser storage.

But, browser storage is not secure and can be wiped at any time by the user. If you are storing information such as passwords or data that should be visible to multiple users, you should use a web server and/or database.

You need to have a script on both pages. The page with the form will store/set the data. The index page will retrieve the data and use javascript to render more content.

function addToIndex() 
{
   localStorage.setItem('input', userInput .value)
}

The script for the index page would look something like this.

var data = localStorage.getItem('input');
if (input) {
  document.querySelector('#contentstart').innerHTML = data;
}

I put together a simple demo here. http://plnkr.co/edit/iAitGxtdsHwXowNg

This works! I'm assuming with PHP it would be easier to dynamically add things to the web page without having to go into the file itself and adding multiple variables to store in `localStorage`? Thanks for the help! — 7Pettay7, Apr 27 '20 at 20:05

How to create HTML elements and apply them to a different HTML file using Javascript?

3 Answers3

Linked