Passing values between parent and popup using Javascript

Posted on 2009-12-20
Last Modified: 2012-05-08
I am trying to do the following using Javascript, and I was hoping someone might be able to provide basic code (using two html pages and javascript functions) to accomplish it:

1) Use HTML form to collect a parameter or two from user
2) Pass that data to Popup window
3) Display that data in the popup window
4) Write something (i.e. "Successful") to parent window when user clicks button on popup (and close popup as well).

Question by:tso11
    LVL 3

    Expert Comment


    This is how i did it... It works on most browsers.

    This is how i changed values of fields in parent windows, based on input in child popup

    You can send data to child via GET parameters with PHP, or program the child popup to collect the data as shown below from the parent onload.
    object = window.opener.document.getElementById('id_of_field')
    object.value = 'new value of field';

    Open in new window

    LVL 4

    Accepted Solution

    Here's an example of how I do it...this is two files...the second one should be named testnew.html
    var passVariable;
    function openWindow(){
    	passVariable = document.getElementById("textbox").value;
    <div id="sentbackdiv"></div>
    <input id="textbox" type="text" value="test" />
    <input type="button" value="Send text to new window" onclick="openWindow()" />
    HERE'S THE NEW WINDOW FILE("testnew.html")
    function sendBack(){
    	opener.document.getElementById("sentbackdiv").innerHTML = "Value passed back is: " + document.getElementById("textbox").value;
    <div id="sentdiv"></div>
    	document.getElementById("sentdiv").innerHTML = "Value passed is: " + opener.passVariable;
    <input id="textbox" type="text" value="test back" />
    <input type="button" value="Send text to back to parent." onclick="sendBack()" />

    Open in new window


    Author Closing Comment

    Worked perfect!  Thanks!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    758 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now