简体   繁体   中英

Pass contents of input in html-page 2 to input in html-page 1

I have 2 webpages, a PHP page, Page 1 with (among others) a (text) Input1,

and a subordinate html page, Page 2, called by pressing a button in Page_1, containing a (text) Input2 and a table of tags.

<input type="text" id="text_B1" name="text_B1" size="30" maxlength="40" onchange="text_B1_Chg()">

text_B1_Chg() saves any user input/change to local storage.

Page 2 is called from Page 1 with this script:

function popup_win(url) {
    var win_options = 'top=50,left=370,height=710,width=400,...';
    var newWindow=window.open(url, 'name', win_options);

    if (window.focus) { 
        newWindow.focus()
    }

    return true;
}

Input_2 is initially empty and filled by clicking in the tags table. After the I finished clicking, Input_2 may have the following content: tag1; tag2; tag3; . The content of Input_2 is created by this script fired by the onclick event in any cell of the tags table in Page_2:

<table id="taglist_tbl">
    <tr>
        <td class="a" onclick="txtTags_Add(this)">agr;</td>
    </tr>
    <tr>
        <td class="a" onclick="txtTags_Add(this)">alg;</td>
    </tr>
...
</table>


function txtTags_Add(sca) {
    // sca is the content of a cell in the tags table

    var selText = document.getElementById("txtTags");
    selText.value += " " + sca.innerText;

    localStorage.setItem("42_text_B1", selText.value);
}

Local storage 42_text_B1 is shared by both Input_1 in Page 1 and Input 2 in Page_2, so that any click in Page_2 SHOULD update Input_1 thru local storage.

While clicking in Page_2 actually changes and updates the local storage, when I close Page_2, Input_1 in Page_1 is not "automatically" updated when focus returns to Page_1. Only after manual refresh of Page_1 in the browser, the new contents of Input_1 becomes visible.

Question: What code is necessary (in the calling script from Page_1 ?) so that Input_1 is "automatically" updated ?

[24.12.2016] See my own answer below.

I added a Javascript event manager

onfocus="text_B1_Updt()" 

in the HTML definition of Input_1 (actually it is called text_B1 )

function text_B1_Updt() {
   var selText = document.getElementById("text_B1");
   selText.value = localStorage.getItem("42_text_B1");
}

but the user still has to click it to see its updated content.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM