I'm trying to create a submit form where I can change the innerHTML of text located on another page using Javascript and HTML.

When I enter text in the input, click submit located on the index.html, I'm being redirected on the other page, the problem is that the h1 on page.html didn't change this value. Why?

Here is the code:

Index.html

<form method="POST" action="page.html" id="form"  onsubmit="change()">
    <input type="text" id="myTextField"/>
    <input type="submit" id="byBtn" value="Change"/>
</form>

Page.html

<h1 id="title">Javascript example no.2</h1>

Javascript.js

function change(){
    var title = document.getElementById('title');
    title.innerHTML = myNewTitle;
}

What am I doing wrong?

I'm trying to create a submit form where I can change the innerHTML of text located on another page using Javascript and HTML.

When I enter text in the input, click submit located on the index.html, I'm being redirected on the other page, the problem is that the h1 on page.html didn't change this value. Why?

Here is the code:

Index.html

<form method="POST" action="page.html" id="form"  onsubmit="change()">
    <input type="text" id="myTextField"/>
    <input type="submit" id="byBtn" value="Change"/>
</form>

Page.html

<h1 id="title">Javascript example no.2</h1>

Javascript.js

function change(){
    var title = document.getElementById('title');
    title.innerHTML = myNewTitle;
}

What am I doing wrong?

• javascript
• html
• forms

• Without storing the value somehwere (e.g. a cookie) how is page.html supposed to know what you entered in the form on index.html? – j08691 Commented Jul 1, 2015 at 15:59
• You snipper will only works if that code is all on the same page and action will be set to "" – Toumash Commented Jul 1, 2015 at 16:01

4 Answers 4

There are a couple of ways to handle this. The most mon is by processing the form data and generating HTML to serve on the server-side, but it can be done client-side using JavaScript if you choose.

Server-Side (PHP) Technique

The example below shows a PHP solution. This could also be done with ASP, JSP, &c. If you want the data to persist, you'll have to catch it on page.php (or equivalent, based on language used) and store it in a session cookie or in a database (depending on the permanence needed).

index.html

<form method="POST" action="page.php">
  <input type="text" id="my_text" name="my_text" />
  <input type="submit" />
</form>

page.php

<?php
  /* the $_REQUEST will get the variable regardless of whether
   * it is sent via POST or GET. You may wish to use $_POST
   * instead, for security reasons. */
  echo "<h1>" . $_REQUEST["my_text"] . "</h1>";
?>

Client-Side (JavaScript) Technique #1

If you want to use JavaScript, you'll need to store the information in a place where it is accessible to other pages on the website. This could be a cookie or localstorage. A cookie is probably the simplest (and most reliable) storage technique in this case. The jQuery example below shows that technique.

index.html

<script type="text/javascript">
  function store() {
    var text = document.getElementById("my_text").value;
    document.cookie = "text=" + text + "; path=/";
  }
</script>
<form action="page.html"  onsubmit="store()">
  <input type="text" id="my_text" />
  <input type="submit" />
</form>

page.html

<h1 id="title"></h1>
<script type="text/javascript">
  /* this just grabs the value of the first cookie for your site.
   * if you use cookies elsewhere, you'll need to add logic to 
   * make sure you get the correct cookie. */
  var text = document.cookie.split(";")[0].split("=")[1];
  document.getElementById("title").innerHTML = text;
</script>

Client-Side (JavaScript) Technique #2

You can also avoid the use of cookies by sending the data in the URL (using GET instead of POST). I borrowed/modified a code snippet from this blog to demonstrate that technique.

index.html (no JavaScript on this page!)

<form method="GET" action="page.html">
  <input type="text" id="my_text" name="my_text" />
  <input type="submit" />
</form>

page.html

<h1 id="title"></h1>
<script type="text/javascript">
  function getUrlVars() {
    var vars = {};
    var url = decodeURIComponent(window.location.href.replace(/\+/g, '%20'));
    var parts = url.replace(/[?&]+([^=&]+)=([^&]*)/gi, 
          function(m,key,value) {
      vars[key] = value;
    });
    return vars;
  }

  var text = getUrlVars()["my_text"];
  document.getElementById("title").innerHTML = text;
</script>

You are running the JavaScript on the current page. It modifies the DOM of the current page, then the new page (specified in the form's action) is loaded.

For it to modify the page you are submitting to you would have to have the JavaScript on that page and it would have to respond to the page loading by checking the submitted data (which is impossible — POST data is not exposed to JS in the target page).

You could store the data elsewhere (such as a cookie) and then look there when the next page loads instead.

That said, this would be best handled with server side code.

You could also store the title as yournewaddress.html#myTitle and get myTitle with : $("h1").text(location.hash)

There's a few ways to do that. The fastest way would be:

index.html

<form method="get" action="page.html">
    <input name="myTextField"/>
    <input type="submit"/>
</form>

page.html

<body onload="change();"
<h1 id="title">Javascript example no.2</h1>

<script>
function change(){

var $_GET = {},
    args = location.search.substr(1).split(/&/);
for (var i=0; i<args.length; ++i) {
    var tmp = args[i].split(/=/);
    if (tmp[0] != "") {
        $_GET[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp.slice(1).join("").replace("+", " "));
    }
}
document.getElementById("title").innerHTML = $_GET[decodeURIComponent(tmp[0])];
}
</script>


</body>