CODEWITHSUNDEEP
javascriptjquerydom
Tachi
Tachi

Reputation: 2202

How to send data from one .window to another using javascript?

I have a form on main page, by pressing a specific button on it - new window() opens with a table in it, and by double clicking the line in the table it should transfer data from table into input fields of my form, but it doesn't. But if i run everything from one page it works fine.

So how should i modify my code so it can transfer data from new window

Main page:

<!DOCTYPE HTML>     
<html>    
<head>     
    <title>Untitled</title>     
    <meta charset="utf-8">     
</head>
<body>
    <button type="button" onclick="NewWindow()">Banks</button>
<br /><br />
    Bank Name:    
    <br />     
    <textarea id='bank' cols=56 rows=6></textarea>     
    Bank Adress:     
    <br />     
    <textarea id='bic' cols=56 rows=6></textarea>     
    <script>     
        var textarea_bank = document.getElementById('bank'),     
            textarea_bic = document.getElementById('bic');  
        function comm(obj) {     
            textarea_bank.value = obj.cells[0].innerHTML;     
            textarea_bic.value = obj.cells[1].innerHTML;     
        }            
        function NewWindow() 
            {
              myChildWin =  window.open("test.html", "_blank", "toolbar=no, scrollbars=no, resizable=no, top=100, left=100, width=600, height=600");
            }     
    </script>     
</body>  
</html>

Window with table(test.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">     
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>test</title>        
    </head>
    <body>
        <table id="mySuperTBL">
        <tr>
            <td><b>BankName</b>
            </td>
            <td><b>BIC</b>
            </td>
        </tr>
        <tr id='1' ondblclick='comm(this)'>
            <td>Bank</td>
            <td>Adress</td>
        </tr>
    </table>        
    </body>
</html>

Upvotes: 2

Views: 3383

Answers (2)

Guy Dafny
Guy Dafny

Reputation: 1829

Very simple, You should create two files. the second one is "stam.html" (this will be the child window):

Editing - bi-directional communication :-)

for the example the file will open itself (keep this file as "stam.html"). If this the parent, it will set the message to the child. else - it will set text to the parent.

<!DOCTYPE html>
<html>
    <head>
        <title>Bla!</title>
        <script type='text/javascript'>
            var m_ChildWindow = null; // 

            function OpenChildWIndow() {
                m_ChildWindow = window.open ("stam.html");
            }

            function SetDataToChild(data) {
                if (m_ChildWindow) {
                    m_ChildWindow.document.getElementById('body').innerHTML += "Dear son:" + data;
                } else {
                    opener.document.getElementById('body').innerHTML += "Dear Daddy:" + data;
                }
            }

            function Init() {
                var button = document.getElementById('cmdSendMsg');
                if (opener) {
                    button.innerHTML = "send message to daddy";
                }
            }
        </script>
    </head>
    <body id='body' onload = "Init();">
        <button onclick='OpenChildWIndow();'>Click to open child</button>
        <br>
        <button onclick='SetDataToChild("Hello <br>");' id='cmdSendMsg'>Click to add data to child</button>

    </body>
</html>

Here you have two buttons. the first will open the new window, the second one will add "hello" to it.

Upvotes: 2

Ghyath Serhal
Ghyath Serhal

Reputation: 7632

You should use query string, the below code shows how you can send an id of value 1 to the test.html

function NewWindow() 
{
    myChildWin =  window.open("test.html?id=1", "_blank", "toolbar=no, scrollbars=no, resizable=no, top=100, left=100, width=600, height=600");
}

Upvotes: 1

Related Questions