1

I have reedited the question as I'm not sure that any of those answers fit.

Here is a code (index.html):

<textarea id="myInput1" class="one" name="myInput1" readonly>
One
One
One</textarea>
</div>

What do I need:

I need to have another page (text.html), by changing which I will be able to edit this page's text.

So if the page (text.html) will display: textarea = Two Two Two

The textarea in the (index.html) will also update and change accordingly.

Edvard
  • 163
  • 8
  • 2
    Welcome. Please see [How to ask](https://stackoverflow.com/help/how-to-ask) and take the [tour](https://stackoverflow.com/tour). You should add [minimal reproducible code](https://stackoverflow.com/help/minimal-reproducible-example) – DecPK Jul 21 '21 at 07:18
  • 3
    Search and learn it you'll get lot more to explore, it is possible in many methods.. – Nithin - Techidiots Jul 21 '21 at 07:19
  • Thank you for a response. I have tried to search it on my own, but I wasn't able to find anything. – Edvard Jul 21 '21 at 07:30
  • https://www.w3schools.com/html/html_links.asp . This is very much basic. There are lot more like get data , post data , ect .. based on various Programming language. – Nithin - Techidiots Jul 21 '21 at 07:36
  • Thank you for providing a path/link where this can be learned. Sorry if it's a basic question, but I have just started. – Edvard Jul 21 '21 at 07:40

3 Answers3

1

The first thing you need to know is that you need jQuery and more specifically its load() function that lets you load data from other pages in the same domain onto another page

You need include the jQuery library like so:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

You can use the jQuery.load() function to get data from another page

$("#<parent div>").load(<content id>);

Here is a complete example of this:

index.html

    <textarea id="myInput1" class="one" name="myInput1" readonly>
        One
        One
        One
    </textarea>
    <p><a href='text.html'>link to next Page</a><p>

text.html:

<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
    <div id='content'>
    
    </div>  
    <script>
        $( "#content" ).load( "index.html #myInput1" )
    </script>
</body>
TERMINATOR
  • 1,180
  • 1
  • 11
  • 24
  • Don't use ancient and unsupported versions of jQuery. – Quentin Jul 21 '21 at 08:41
  • None of your approaches load a new page with custom content, they all modify the existing page. – Quentin Jul 21 '21 at 08:42
  • None of your approaches work at all either, they all depend on `loadNewContent` running to create the element that the user has to click on **before** `loadNewContent` will run. – Quentin Jul 21 '21 at 08:44
  • They can't click the link because the link won't be added to the page until after they have clicked the link. – Quentin Jul 21 '21 at 08:46
  • Should i Use an on load event – TERMINATOR Jul 21 '21 at 08:48
  • No. You seem to have got completely the wrong idea about what the question is trying to achieve. – Quentin Jul 21 '21 at 08:49
  • I have read the OP's comments and they want the conetnt to be fetched dynamicaly – TERMINATOR Jul 21 '21 at 08:54
  • No. They want to click on a link, navigate to the page the link points to, and display some custom content on that page which is determined by the link they clicked. – Quentin Jul 21 '21 at 08:55
  • I have adjusted my answer as best I can and I value your input but it seems we have differnt ideas of what the OP is asking – TERMINATOR Jul 21 '21 at 08:56
  • You seem to be answering the question "How do I include a navigation bar on every page without copy/pasting it?" which is so very different to what the OP has said that I've no idea how you came by that interpretation. – Quentin Jul 21 '21 at 08:58
  • they want to get the content from the link on the main page which is exactly what my code does, but again I still value your input but it seems we are understand this question differently – TERMINATOR Jul 21 '21 at 08:59
  • Hi, sorry I have tried your code and I don't think it works. I want to have two pages, one will be invisible to customers but will contain the text. And I want a second page that will just display the text which is stored at the first page, so if I change the first page's content the second page's content changes too. – Edvard Jul 24 '21 at 14:45
  • I am so sorry my code didn't work but I have fixed it and it works now – TERMINATOR Jul 25 '21 at 10:13
  • And @Quentin Thanks for all your help I have gotten it to work without any ancient code – TERMINATOR Jul 25 '21 at 10:15
  • @TERMINATOR, can you please take a look at the initial question, I have edited it. Maybe you can help me with a script that will include my example? – Edvard Jul 25 '21 at 12:58
  • @Edvard give me 5 minutes or so – TERMINATOR Jul 25 '21 at 13:05
  • @Edvard I have adapted my solution to your given code and it works – TERMINATOR Jul 25 '21 at 13:21
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/235275/discussion-between-edvard-and-terminator). – Edvard Jul 25 '21 at 13:47
0

There are several steps to this.

First you need to make the text you pass to pass available to the page you are passing it to.

The traditional way is to encode this into the query string of the URL.

<a href="mypage?text=One">One</a>

Note that this is vulnerable to CSRF so if the target page supports arbitrary text then third-parties could link to your page and have whatever (e.g. offensive, fraudulent, or defamatory) content they like shown to the person who clicked the link unless you take steps to prevent that.

If you are working with purely client-side JavaScript then you might store it in localStorage instead. This, however, is subject to race conditions so if someone is clicking around multiple pages and going back to the page showing the link provided content then they'll get the text from thenlatest link that was clicked on, even if that as in another tab.

Second you need to read the data from wherever you put it. This question covers reading query string values using client side JS.

If you are using server-side JS then you are probably using Express, in which case you can use the request.query property.

(The earlier link about localStorage shows how to read and write with it).

Third you need to insert it into the page. MDN has a guide for manipulating documents with client-side JS.

If doing this server-side then you should use a template engine that has suitable escaping features to protect against XSS.

Note that having lots of similar pages that differ only by small amounts of data is likely to give you duplicate content penalties.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
-1

You want the page, e.g. index.html, to contain 3 links: one, two, three. After clicking on One it moved to, for example, one.html, and there was a link "return" from href "index.html"?
Manualy: <a href="one.html">One</a>
In one.html:
Manualy: <a href="index.html">Index</a>
Other
var element = document.getElementById(id); In JavaScript.

kamilek020
  • 1
  • 2