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

Introduction: Hello Guys, “Welcome back” Today, i am here with another one new great article. In this article I explained the implementation about how to pass value from one child popup window to another 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 instanceof the  JavaScript window.opener  will be used as  reference and access their elements of the parent page by using  JavaScript.

 Code for Parent Page

On the HTML Parent Page I will use HTML TextBox and a Button controls. To the TextBox I will be assigned ReadOnly attribute. To the Button I will be assigned an OnClick event handler. When user will be click on the Button, 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:&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();

        return false

    }

</script>

 

 

Code for Popup Child Window Page

On the HTML page of the Child Popup Window I will consists HTML the controls that will be a  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  JavaScriptt 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.

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

 

Conclusion: In above code, I explained the implementation about how to pass value from one child popup window to another parent page window using  JavaScript. This code is very helpful for every developer. Bye bye and take care of yourself Developers. We will come back shortly with the new article.

 

Regards

Programming HUB