On page 1, I have a div containing information.

<div id='information'></div>

And on page 2, I have a form with a textarea and a button.

<form>
  <textarea id='new-info'></textarea>
  <input type='submit' id='submit-info' value='pass'/>
</form>

Now what I want is when I click the submit button, the text inputted in the text area will be posted in div#information changing its previous content.
I have seen many other post on how to change div content, but those were unrelated to my problem.

On page 1, I have a div containing information.

<div id='information'></div>

And on page 2, I have a form with a textarea and a button.

<form>
  <textarea id='new-info'></textarea>
  <input type='submit' id='submit-info' value='pass'/>
</form>

Now what I want is when I click the submit button, the text inputted in the text area will be posted in div#information changing its previous content.
I have seen many other post on how to change div content, but those were unrelated to my problem.

• javascript
• jquery

• The easiest would be to use PHP and change content via GET or POST values, I believe. – display-name-is-missing Commented Feb 16, 2014 at 10:11
• Are the pages open at the same time? Then this can only be done if one of the pages has been opened by the other. – flec Commented Feb 16, 2014 at 10:13
• possible duplicate of Javascript munication between browser tabs/windows – Tobias Commented Feb 16, 2014 at 10:15
• @DanielLisik, how can I use POST here? can you show me some samples? @flec no. the page aren't open at the same time. thanks a lot :D – Nixxhalle Commented Feb 16, 2014 at 10:23
• @Nixxhalle does the user gets redirected to the second page or are they in two iframes? – display-name-is-missing Commented Feb 16, 2014 at 10:24

4 Answers 4

One way is to do like what the other answers mentioned, to have each tab municate to a central server that will get/send data to keep both tabs updated using AJAX for example.

But I'm here to tell you about another way though, it's to use what we already have designed for this kind of task exactly. What so called browser localStorage

Browser storage works like this pseudo code:

  //set the value, it works as a hash map or assoc array. 
   localStorage .setItem("some_index_key", "some data") ; 
   // get the value by it's index key. 
   localStorage .getItem("some_index_key") ; // will get you "some data" 

Where all the data will be shared among all open tabs for the same domain. And you can add event listener so whenever one value change, it will be reflected on all tabs.

addEvent(window, 'storage', function (event) {
  if (event.key == 'some_index_key') {
    output.innerHTML = event.newValue;
  }
});

addEvent(myInputField, 'keyup', function () {
  localStorage.setItem('some_index_key', this.value);
});

Check out this DEMO, you edit one field on page-A, and that value will be reflected on page-B offline without the need to burden the network.

To learn more, read this.

Real live example. The background color is controlled from another tab.

     var screenone = document.getElementById('screenone');

            screenone.addEventListener('keydown', screenOneFunction);
            screenone.addEventListener('change', screenOneFunction);
           
    function screenOneFunction()
            {
                document.body.style.backgroundColor = this.value;
                localStorage.setItem("color1", this.value);
            }
            
            
            
            var screentwo = document.getElementById('screentwo');

            screentwo.addEventListener('keydown', function (evt) {
                localStorage.setItem("color2", this.value);
            });
            screentwo.addEventListener('change', function (evt) {
                localStorage.setItem("color2", this.value);
            });



            var thebutton = document.getElementById('thebutton');

            thebutton.addEventListener('click', function (evt) {
                localStorage.clear();
                screenone.value = "";
                screentwo.value = "";
                document.body.style.backgroundColor = "";
            });



            var storageHandler = function () {
                document.body.style.backgroundColor = localStorage.color2;
                var color1 = localStorage.color1;
                var color2 = localStorage.color2;
                screenone.value = color2;
                screentwo.value = color1;

            };
            window.addEventListener("storage", storageHandler, false);

       .screenone{ border: 1px solid black;}
       input{ margin: 10px; width: 250px; height: 20px; border:round}
      label{margin: 15px;}

<html>
    <head>     
    </head>
    <body>
        <label> Type a color name e.g. red. Or enter a color hex code e.g. #001122 </label>
        <br>
        <input type="text"   class="screenone" id="screenone" /> 
        <label> This tab </label> 
        <br>
        <input type="text"   class="screentwo" id="screentwo" /> 
        <label> Other opned tabs </label>  
        <br>
        <input type="button"   class=" " id="thebutton" value="clear" /> 
    </body>
</html>

Hope this will give you an idea of how you can do it:

Page 2

HTML

<form>
  <textarea id='new-info'></textarea>
  <input type='submit' id='submit-info' value='pass'/>
</form>

JS

$("form").submit(function(e){

    e.preventDefault();

    $.post('save_data.php', { new_info:$("#new-info").val() }).done(function(data){
         // Do something if you want to show that form has been sent
    });


});

save_data.php

<?php

if (isset($_POST['new-info'])) {

    // Update value in DB

}


?>

Page 1

HTML

<div id='information'>
</div>

JS

setInterval(search_after_info, 1000);


function search_after_info() {

    $.get('get_data', function(data) {

        $("#information").html(data);

    });

}

You mean some thing like this ?

$("#submit-info").click(function() {
   var content = $("#new-info").text();
   $("#information").html(content);
  });

If you thing about server side, tell more about technology, which you use.

This is exactly as the following: Page 1:

<form action="test2.htm" method="get">
<textarea name ='new-info'></textarea>
<input type = 'submit' id='submit-info' value ='pass'  onclick="postData();"/>

Page 2

   <div id="information"></div>
<script> 
        if (location.search != "")
        {
            var x = location.search.substr(1).split(";")
            for (var i=0; i<x.length; i++)
            {
                var y = x[i].split("=");
                var DataValue = y[1];
                document.getElementById("information").innerHTML  = DataValue;
            }
        }       


</script>