CODEWITHSUNDEEP
javascripthtml
SK 4
SK 4

Reputation: 15

How to pass data to parent in JavaScript and HTML

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.

Upvotes: 0

Views: 2060

Answers (3)

mamaj
mamaj

Reputation: 85

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

Upvotes: 1

Deepak Kamat
Deepak Kamat

Reputation: 1980

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.

Upvotes: 2

Cl&#233;ment Cartier
Cl&#233;ment Cartier

Reputation: 185

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

Upvotes: 1

Related Questions