Open new page and edit its div's via js

Question

Hello,
I'm trying to make such a form that you fill in some data, and by submitting the data js will open a new page with the data formatted in a format(template) that I made beforehand.

I made a template html that has empty divs that are "waiting" to be filled with the user's data from the form.

so far i managed to open the template html file on a new tab, now all left to do is fill in the divs with the user's data from the form.

this is my code:

// values taken from the form (works well):
let store_name = document.getElementById("store-name").value;
let store_desc = document.getElementById("store-desc").value;

// open new window (work well):
let newWindow = window.open('./store_template.html', '_blank');

// load user's data on the template html file (doesn't work!):
newWindow.onload = function() {
newWindow.document.getElementById("store-name").innerHTML = store_name;
newWindow.document.getElementById("store-desc").innerHTML = store_desc;
}

how can I make it work?

thanks.

Answer 1

Passing form data is not usually done like that. It's more common for people to submit form data to a back-end code.

But I found these in stackoverflow, which discuss how to read form data using JS in another HTML document. Mind you the examples shown uses form submission, not opening new window.

https://stackoverflow.com/questions/14693758/passing-form-data-to-another-html-page
https://stackoverflow.com/questions/49042651/how-do-i-pass-form-data-from-one-html-page-to-another-html-page-using-only-javas

Answer 2

I use this 👇
HTML
<input type="text" id="name"/>

JAVASCRIPT
function creat(){
var x=document.getElementById("name").value;
var a=document.creatElement("p");
a.innerText=x;
body.append(a);
}