How can I send text from a.html to b.html

Question

It is possible that the input text is sent to the second page with the help of javascript.

I need suggestions, help how I can send the text from a.html to b.html

Cod a.HTML

<input type="text" >
<button>send</button>

Cod b.HTML

<p id="mytxt">
  <!-- text from a.html -->
</p>

Does this answer your question? [Transfer data from one HTML file to another](https://stackoverflow.com/questions/17502071/transfer-data-from-one-html-file-to-another) — Heretic Monkey, Apr 30 '20 at 19:28
It's not the first time I've written about this. Why write the same question twice) — Sergiu121, Apr 30 '20 at 19:42

score 0 · Answer 1 · answered Apr 30 '20 at 19:23

0

This is basically how forms work. You wrap your input and button in a form tag with the attributes method="get" and action="b.html". Inside of b.html you can read the submitted data from the URL.

https://www.w3schools.com/tags/tag_form.asp

answered Apr 30 '20 at 19:23

Milton

970
4
13

score 0 · Answer 2 · answered Apr 30 '20 at 19:23

0

You can use Get parameters. When going to b.html, set a get parameter b.html?text=SOME_TEXT

and in b.html using js to get parameter:

let url = new URL(window.loacation.href);
let text = url.searchParams.get("text");
document.getElementById('mytxt').innerText = text

answered Apr 30 '20 at 19:23

BeHappy

3,705
5
18
59

Thank you very much – Sergiu121 Apr 30 '20 at 19:40

FZs · Accepted Answer · 2020-04-30T19:43:55.017

You could use the query part of the URL to "send" data to another page:

a.html:

<form action="b.html" method="get">
    <input type="text" name="mytext">
    <button>send</button>
</form>

b.html:

<p id="mytxt"></p>
<script> 
    document.getElementById('mytxt').appendChild(document.createTextNode(new URL(location.href).searchParams.get('mytext')))
</script>

However, this has its own limits. E.g. URL's length should be under 2000 characters, and if somebody revisits the generated link, the same text will appear.

If you have access to some server-side language/configuration, you can make a POST request instead, and manipulate b.html on the server.

If you have to stick to front-end, you could also try something with the Session Storage, and a redirection using JS.

How can I send text from a.html to b.html

3 Answers3