Send value in textarea

Question

Hi I was just wondering how to persist the data to another page. So far I've found out that I need a form to send it in, Here's an example:

HTML:

<form action="Result.html" method="get">
<textarea id="test" autofocus></textarea>
<p id="demo"></p>
<button onclick="myFunction()"></button>
</form>

jQuery:

function myFunction() {
   var x = document.getElementById("test").value;
   document.getElementById("demo").innerHTML = x;
}

This file that I'm using it's called Exercise1.html, I don't know if it helps or not but just in case it does. I know HTML, CSS, jQuery and Javscript so I rather prefer that

Answer 1

Because loading a new page causes the JavaScript and HTML to be destroyed there is not way to preserve the value between page loads without some extra work. There are essentially three options.

Server Script

When the form sends data to a running server the server can take the value and inject it into the next page. Since this is a JavaScript question I will assume this is beyond the scope of the question.

Cookies / localStorage

Each page could look for a form of persistent storage on page load and populate the values. Usually you can save data to localStorage or possibly a cookie. Then on page load the JavaScript should load the value from storage and populate as needed.

Single Page App

In the case of a Single page app the value would be in memory and you manipulate the DOM to swap out views There are many frameworks that offer things like routing to make it look like a new page even though it is still the same page. Then you can populate values that way.

To explain in detail all options would be more then a single answer and more specific details should be searched and asked for.

Answer 2

In the exercise1.html:

<form id="form1" action="result.html" method="get">
    <textarea id="aboutme" name="aboutme" rows="10" cols="30"></textarea>
    <input type="submit" class="bottom" name="submit" id="submit" value="Sign up" >
</form>

In the result.html:

<script>
var queryString = decodeURIComponent(window.location.search);
queryString = queryString.substring(1);
var queries = queryString.split("&");
for (var i = 0; i < queries.length; i++)
{
    var query = queries[i].split("=");
    document.write(query[1] + "<br>");
}
</script> 

Answer 3

If you like to persist your value to other pages on your webpage you can put the values in cookies:

// This saves your value
function saveField(){
    value = $('#test').val();
    document.cookie['myValue'] = value;
}

// This gets your value back on other pages
function loadField(){
    return document.cookie['myValue'];
}

More on how cookies work here

Answer 4

Hi I just wanted to say that I found another way to do display what key that was pressed, if anyone else is interested.

Javascript:

document.onkeypress = function(e) {
   e = e || window.event;
   var charCode = e.charCode || e.keyCode,
   character = String.fromCharCode(charCode);
   console.log(charCode);

   if(e.charCode == 98 || e.keyCode == 98) {
      document.write("B = " + charCode + "<br>");
   } else if(e.charcode == 114 || e.keyCode == 114) {
      document.write("R = " + charCode + "<br>");
   }
};

So when you press B or R it displays the keyCode or charCode and it works in Chrome, Explorer and in Firefox (but it's a little slow in firefox, but it works).