0

I got a Button on HTML form (let's call it Form_A) which when clicked, opens a new window (let's call it Form_B).

When user fill in some information in Form_B form and hit submit (or just a button), I need to send some processed information back to 'Form_A' and close 'Form_B.'

How can I accomplish it?

user3133397
  • 23
  • 4
  • by calling a function on `window.opener` and pass the data as an argument – adeneo Feb 08 '14 at 14:44
  • Why do you need to open a new window? You can have a `div` with `display:none` css and on clicking the button, you can make it visible (api.jquery.com/show). Then on clicking another button related to the div or submitting the form( keep the div in form B ) you can get the info from here to form B. use api.jquery.com/submit to submit form without opening another window. – Istiaque Ahmed Feb 08 '14 at 15:42
  • @IstiaqueAhmed I can't explain the whole business requirement over here and I guess, neither would you be interested... Let's just say, I need it, and I found the solution as well... Check my comments below – user3133397 Feb 08 '14 at 16:02
  • @adeneo thanks, you answer directed me to right direction – user3133397 Feb 08 '14 at 16:03

2 Answers2

0

This is best illustrated with an example. In the code of Form_A:

<div id="target"></div> <button onclick="window.open('form_b.html'); return false">Open Form B</button>

function receive_data (value)
{
    $("#target").text(value);
}

In the code of Form_B:

<input type="button" onclick="window.opener.receive_data('hello'); window.close();">
Jules
  • 14,841
  • 9
  • 83
  • 130
  • Works fine on IE, but gives security exception on Chrome. Do you think, it can be because I am running it locally. Finally, these two files will be hosted across different sub-domain of a website. – user3133397 Feb 08 '14 at 15:35
  • Dunn know why it was giving error locally, when I deployed it (after fixing the sub-domain issue), it was working fine for all browsers. Appending code in my Question. Thanks for snippet. – user3133397 Feb 08 '14 at 16:06
  • Chrome applies stricter security standards to javascript running from local files than ones downloaded from a web server. It's perverse, but true. – Jules Feb 08 '14 at 16:07
  • SOLUTION: =========== a.html =======
    b.html =======
    This helped - http://stackoverflow.com/questions/5183684/cross-domain-javascript-code-with-sibling-sub-domains     – user3133397 Feb 08 '14 at 16:20
0

You can do it using localStorage, like:

<!--FormB-->
<input type="submit" onclick="processInfo();" />

and in your javascript code:

function processInfo(){
    //process your information then
    //let's day you have 2 variables as a result of your process
    var info1 = "My Information 1";
    var info2 = "My Information 2";
    localStorage.setItem("info1", info1);
    localStorage.setItem("info2", info2);
}

then in your code on the next page get your variables whenever you wanted like:

    function getInfo1(){
        return localStorage.getItem("info1");
    }

    function getInfo2(){
        return localStorage.getItem("info2");
    }

and the other solution for ancient browsers is using window.opener, you can use it in your close function like this:

<!--FormB-->
<input type="button" onclick="closeWindow();" />

javascript code:

function closeWindow(){
    //process your information then
    //let's day you have 2 variables as a result of your process
    var info1 = "My Information 1";
    var info2 = "My Information 2";

    window.opener._info1 = info1;
    window.opener._info2 = info2;

    window.close();
}

then you can get them in the main page like:

    function getInfo1(){
        return window._info1;
    }

    function getInfo2(){
        return window._info2;
    }

BTW, we usually use _ when we want to simulate private variable, whereas they are not really private.

Mehran Hatami
  • 12,723
  • 6
  • 28
  • 35