Pass value from child popup window to parent page

2020-01-07 18:02:15

Here Mudassar Ahmed Khan has explained how to pass value from child popup window to parent page window using JavaScript.

The child popup window must be opened using JavaScript window.open function. And in such case we can access the parent page controls using JavaScript window.opener instance.

In this article I will explain how to pass value from child popup window to parent page window using JavaScript.

The child popup window must be opened using JavaScript window.open function. And in such case we can access the parent page controls using JavaScript window.opener instance.

Parent Page

Inside the Parent Page I have placed a TextBox which is read-only and a button to open the child popup window using the SelectNameJavaScript function.

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            Name:&nbsp;
        </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 Popup Child Window Page has a DropDownList to choose the name of the person and a button which when clicked calls the SetNameJavaScript function.

This function uses the reference of window.opener property and finds the Parent Page txtName TextBox using document.getElementById method of JavaScript and sets the value selected through the DropDownList to it.

<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>

In similar way you can access other controls too of the Parent Page from the Child Popup Window Page

Pass value from child popup window to parent page window using JavaScript