How to pass data to parent in JavaScript and HTML

Question

I am creating a website in plain HTML, CSS and JavaScript and want to send data between two pages (child and parent). Here is a simple example of what I want to do. CHILD PAGE:

<html>
<head>
<title>Child</title>
</head>
<body>
<input type='text' placeholder='Enter data to be sent.' id='data'>
<button onclick='work()'>Send</button>
<script>
function work(){
var data = document.getElementbyId('data').value
//Code to send this data to parent.
}
</body>
</html>

PARENT PAGE:

<html>
<head>
<title>Parent</title>
</head>
<body>
<h1 id='data_recieved'></h1>
<button onclick='work()'>Recieve</button>
<script>
function work(){
var data = document.getElementbyId('data_recieved').innerHTML;
//Code to receive the data from child
}
</body>
</html>

I will be very grateful for your help.

You can use localstorage if there is a lot of data or else you can pass it the url and read in the parent page. I am assuming these are two different pages and redirection is there — Abhishek Sharma, Jan 26 '21 at 16:03
I don't fully understand how your app is structured but it sure sounds like you could use some `sessionStorage` or even better some Vue or React ;) — maxshuty, Jan 26 '21 at 16:04
How is this parent-child relation implemented? There's nothing pointing to a "child page" in the parent page's code. — Teemu, Jan 26 '21 at 16:04
Do these pages load at separate times at different paths? Or is the child loaded inside the parent as an iframe? If the former, you'll need to use localStorage, or switch to a single page app, because otherwise each time you load a different page you are flushing JS memory. — Alexander Nied, Jan 26 '21 at 16:05
@AlexanderNied First the child is loaded and when the user sends the data in child then the parent page is opened with the data — SK 4, Jan 26 '21 at 16:08
@Teemu This is just an example. you can call these anything :) — SK 4, Jan 26 '21 at 16:08
@maxshuty That's the whole point I created this post. I already know React — SK 4, Jan 26 '21 at 16:09
"Parent-child" is a special relationship, meaning the child is somehow connected to the parent (there are properties in both DOMs to refer to each other). If you just have two separate pages, they don't have that relationship. — Teemu, Jan 26 '21 at 16:10
We need to know how that "parent page" is opened and where, otherwise there's not much to answer. Without any further information (and tied to the languages in the tags), you can post [messages](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) between pages, if they share the same domain, or you can at least control both pages. — Teemu, Jan 26 '21 at 16:23
@SK4 so if you already know react but are trying to do this using vanilla JS for some reason, then it sounds like you should look into my other suggestion of `sessionStorage` and triggering events. — maxshuty, Jan 26 '21 at 16:25

Deepak Kamat · Answer 1 · 2021-01-26T16:29:29.617

DOM don't work across pages. You have to use a storage medium, it can be client side i.e localStorage, 'sessionStorage' or cookies using JavaScript. Or you can use a backend where you can store the values in some sort of database.

Another way to pass data from one page to another is to use a <form>, fill in certain fields and submit it so that it gets sent as POST or GET data to the next page. In your case I believe this should be the ideal scenario. If you do not have a backend best option is to send form data using GET method so that it gets appended to the URL as query parameters.

e.g on parent HTML page

<form action='child.html' method='get'>
   <input type='text' name='somedata' value='whatever'/>
   <input type='submit'/>
</form>

and on child page you can use JavaScript to get the query parameters using JS

<script>
var somedata = getParameterByName('somedata');
function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
</script>

There are of course other more sophisticated and advanced ways to achieve the same results but those might not be what you are looking for.

score 1 · Answer 2 · answered Jan 26 '21 at 16:16

1

Sending data to a page doesn't mean anything, you have to send data to a program or to a server that will be able to interpret this data.

The easiest way is to send an HTTP request to the server, either by ajax if you don't want the navigator to close the page, or by just sending the form or requesting a link. You can then interpret the request using any program you want (PHP being one of the most used option).

answered Jan 26 '21 at 16:16

Clément Cartier

174
2
11

For example, Creating a ref in firebase database with the data and then reading from it? – SK 4 Jan 26 '21 at 16:38
It's not even clear what you are trying to achieve or have already tried. – Deepak Kamat Jan 26 '21 at 17:51

score 1 · Answer 3 · answered Jan 26 '21 at 16:44

Firstly, I noticed that your <input /> tag is missing the / to self close.

You will need to add a Javascript file to your project. Import the file into both html pages using a <script> tag.

You can get rid of the work() functions in both pages. Rather, you will store the onClick events in the Javascript file. Additionally, you will have a data object in the Javascript file that will store the data when the 'sent' button is clicked and retrieve it when the 'receive' button is clicked.

Add an id to the 'send' button on the child page: <button id="send-button">Send</button>

In the Javascipt file:

let data = ''; //data will start off as an empty string

$("send-button").on('click', function(){
        data = $("data").val(); //gets the data from your <input /> on the child page
})

Now add an id to the 'receive' button on the parent page: <button id="receive-button">Receive</button>

And back to the Javascript file where the data will be stored in the data object:

$("receive-button").on('click', function(){
        $("data-received").val(data); //changes the value of the <h1> to be the data
})

There's no self-closing tags in HTML standard. There are tags which have optional closing tag, and tags which of closing tag must be omitted. HTML parser can handle self-closing tags, but they're not mandatory, or even recommended. — Teemu, Jan 27 '21 at 15:30

How to pass data to parent in JavaScript and HTML

3 Answers3