In this article I will explain with an example, how to pass value from child popup window to parent page window using JavaScript.
When the child popup window is opened using the JavaScript window.open function, the reference object of the parent window is obtained from JavaScript window.opener instance.
The JavaScript window.opener instance can be used to reference and access the elements of the parent page using JavaScript.
Parent Page
The HTML Markup of the Parent Page consists of a HTML TextBox and a Button. The TextBox has been assigned with ReadOnly attribute.
The Button has been assigned with an OnClick event handler. When the Button is clicked, the SelectName JavaScript gets called which will open the Popup window using the window.open function.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Name:
</td>
<td>
<input type="text" id="txtName" readonly="readonly" />
</td>
<td>
<input type="button" value="Select Name" onclick="SelectName()" />
</td>
</tr>
</table>
<script type="text/javascript">
var popup;
function SelectName() {
popup = window.open("Popup.htm", "Popup", "width=300,height=100");
popup.focus();
}
</script>
Popup Child Window Page
The HTML Markup of the Child Popup Window Page consists of a HTML DropDownList and a Button.
The HTML DropDownList will be used to choose the name of the person.
The Button has been assigned with an OnClick event handler. When the Button is clicked, the SetName JavaScript gets called.
Inside the SetName JavaScript function, the reference of the parent window txtName TextBox is obtained from window.opener instance using document.getElementById method of JavaScript.
Finally, the DropDownList selected value is set into the TextBox value property.
Note: In similar way, window.opener instance can be used to reference and access the other controls (elements) of the parent page from the child popup page using JavaScript.
<select name="ddlNames" id="ddlNames">
<option value="Mudassar Khan">Mudassar Khan</option>
<option value="John Hammond">John Hammond</option>
<option value="Mike Stanley">Mike Stanley</option>
</select>
<br />
<br />
<input type="button" value="Select" onclick="SetName();" />
<script type="text/javascript">
function SetName() {
if (window.opener != null && !window.opener.closed) {
var txtName = window.opener.document.getElementById("txtName");
txtName.value = document.getElementById("ddlNames").value;
}
window.close();
}
</script>
Screenshot
![Pass value from child popup window to parent page window using JavaScript]()
Demo
Downloads
