Change content of a div on another page

2020-04-21 06:29发布

站内问答 / JavaScript
1914 4 6

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.

4条回答
Deceive 欺骗
2楼-- · 2020-04-21 07:07

One way is to do like what the other answers mentioned, to have each tab communicate 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>

查看更多
0人赞 添加讨论(0) 举报
趁早两清
3楼-- · 2020-04-21 07:16

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);

    });

}
查看更多
0人赞 添加讨论(0) 举报
三岁会撩人
4楼-- · 2020-04-21 07:20

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>
查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
5楼-- · 2020-04-21 07:27

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)