how to get textarea input from another HTML page

Question

In a.html: I have a textarea that is converted into a link after the user clicks the submit button. When the user clicks on the link they are redirected to b.html.

<textarea id="sentenceId">
</textarea>
<br>
<button type="button" id="buttonId" onclick="createLink(document.getElementById('sentenceId').value)">Submit
</button>

<p id="demo">
    <a id ="link" href="b.html"></a>
</p>

In b.html: I would like to display the original text.

In script.js:

function createLink(val) {
    document.getElementById("link").innerHTML = val;
    document.getElementById('buttonId').style.display = 'none';
    document.getElementById('sentenceId').style.display = 'none';
}

I am not quite sure what you try to accomplish here, so you need to shoot variable link to a new page? Try using the localstorage for that if it's not to many. The functions `localStorage.setItem()` and `localStorage.getItem()` will help you. see https://stackoverflow.com/questions/27765666/passing-variable-through-javascript-from-one-html-page-to-another-page — Dorvalla, Jun 30 '17 at 12:26

Kramb · Answer 1 · 2017-06-30T13:11:42.127

Using localStorage

The localStorage property allows you to access a local Storage object. localStorage is similar to sessionStorage. The only difference is that, while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the browsing session ends—that is, when the browser is closed.

a.html

function createLink(val) {
    document.getElementById("link").innerHTML = val;
    document.getElementById('buttonId').style.display = 'none';
    document.getElementById('sentenceId').style.display = 'none';

    localStorage.setItem("textArea", val);
}

b.html

function getText(){
    var textVal = localStorage.getItem("textArea");
}

Another option would be to use a query string.

a.html

function navigateTo(val){
    window.href.location = "b.html?text=" + val;
}

This will pass the value of the text from textarea with the url during navigation. Once b.html has loaded, you can do the following.

b.html

function getText(){
    var url = window.location.href;
    var queryIndex = url.indexOf("=") + 1;
    var passedText = url.substring(queryIndex);

    document.getElementById('foo').value = passedText;
}

score 0 · Answer 2 · answered Jun 30 '17 at 12:43

If you want to open a new page and get the text there, you could use a post-form and an input[type="hidden"] to send the text and display it afterwards.

If you wand the link to be sendable, you'd either have to encode the text as get-parameter or save it to a database and add the id of the entry to the link.

As @Kramb already mentioned, localStorage is a possibility, but only if you stay on the same browser and both pages have the same domain.

Red · Answer 3 · 2017-06-30T13:36:02.220

This is possible using JavaScript. You can do an AJAX call to another page on you website, and search for an element to get its content. In you're case an textarea

I wrote an example on codepen.io for you. Click here

To make things simpler im using jQuery in this example.

So how does it work?

First of, include jQuery inside the <head> tag of you're website.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

I created the following structure

structure

root
- scripts
  - jQuery.min.js
  - index.js
index.html
textarea.html

Contents of index.html

<!DOCTYPE html>
<html lang="en">
<head>

  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>My New Pen!</title>

    <script type="text/javascript" src="scripts/jquery.min.js"></script>

  <!--  Styles  -->
  <link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>

    <button id="clickme">To load the textarea content, click me!</button>

    <div id="content">The data from the textarea will be shown here, afte you click on the button :)</div>

  <!-- Scripts -->
  <script src="scripts/index.js"></script>
</body>
</html>

Contents of texarea.html

<textarea id="textarea">
    I am the content of the textarea inside the textarea.html file.
</textarea>

Contents of index.js

(function() {
    $(document).ready(function() {

        /**
         * The button which triggers the ajax call
         */
        var button = $("#clickme");

        /**
         * Register the click event
         */
        button.click(function() {
            $.ajax({
                url: "textarea.html",
                type: "GET"
            }).done(function(response) {
                var text = $(response).filter("#textarea").html();
                $("#content").append("<br/><br/><strong>" + text + "</strong>");
            });
        });

    }); 
})()

So what does index.js do exactly?

As you can see i created an Ajax call to the textarea.html file. The .done function holds the response data. The data inside it can be anything depending on the content of the textarea.html file.

$(response).filter("#textarea").html();

The above piece of code filters out the #textarea div and then gets the innerHTML using the jQuery html() function.

If you want to get the value of the textarea through the [value] attribute, you can replace above line to

$(response).filter("#textarea").val();

score 0 · Answer 4 · answered Jun 30 '17 at 13:40

I believe you want to do this:

function createLink() {
var textvalue = document.getElementById('sentenceId').value; 
    document.getElementById("link").innerHTML = textvalue;
    document.getElementById("buttonId").className ="hideme";
    document.getElementById("sentenceId").className ="hideme";
}

.hideme{
display: none;
}

<textarea id="sentenceId">
</textarea>
<br>
<button id="buttonId" onclick="createLink()">Submit
</button>

<p id="demo">
    <a id ="link" href="b.html"/>
</p>

how to get textarea input from another HTML page

4 Answers4

Using localStorage

Another option would be to use a query string.

So what does index.js do exactly?