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 JavaScriptwindow.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 SelectName JavaScript 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 SetName JavaScript 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

 

Demo : http://aspsnippets.com/demos/662/