Communicating with a pop-up's parent

Jake Howlett, 23 Febraury 2001

Category: Forms; Keywords: window parent opener form

Launching "pop-up" windows from the browser is fairly easy, assuming we all know about the window.open method. What do you do when you want to get some data from the new window back to the old one? We use the window.opener property of the pop-up don't we!?

window.opener creates an object reference to the window (or frame) that called window.open() in order to create the current window. We can use this to gain access to objects on the original document and alter them accordingly. Here's how:

On the original form create a link/button/action that launches a new window.


<input type="button" value="Choose.." onClick = "window.open('/dir/db.nsf/ColourPicker?OpenForm','new_win','width=150,height=150');">

In the form that is being opened we need a link that will send information back:

<input type="button" value="Send Colour" onClick="window.opener.document.forms['test'].MyFavouriteColour.value = this.form.Colour.value; window.close();">


And now what would this amount to without an example?

Colour:


In the above example I've used the onChange event handler of the drop-down list to call a function which returns the value and closes the window.