Pass (Send) value from Parent page window to Child popup window using JavaScript

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

The child popup window must be opened using JavaScript window.open function. The window.open function returns the reference of the opened Child popup window using which the elements and controls of the Child popup window will be accessed.

 

 

Popup Child Window Page

The Popup Child Window Page consists of two HTML Span elements. These Span elements will display the FirstName and LastName values passed from the Parent page.

<table border="0" cellpadding="0" cellspacing="0">

    <tr>

        <td>

            First Name:&nbsp;

        </td>

        <td>

            <span id="lblFirstName"></span>

        </td>

    </tr>

    <tr>

        <td>

            Last Name:&nbsp;

        </td>

        <td>

            <span id="lblLastName"></span>

        </td>

    </tr>

</table>

 

 

Parent Page

The Parent page consists of two TextBoxes and two Buttons. When the Open Popup button clicked, it opens Child page as Popup window using OpenPopup JavaScript function.

Once the Child page is opened as Popup window, the Send button has to be clicked, which makes a call to the SendToPopup JavaScript function.

Inside the SendToPopup JavaScript function, first a check is performed whether the Child page Popup is open or closed and if the popup is open, its HTML Span elements are accessed and the values of the FirstName and LastName TextBoxes are set into the respective HTML Span elements.

<table border="0" cellpadding="0" cellspacing="0">

    <tr>

        <td>

            First Name:&nbsp;

        </td>

        <td>

            <input type="text" id="txtFirstName" value="" />

        </td>

    </tr>

    <tr>

        <td>

            Last Name:&nbsp;

        </td>

        <td>

            <input type="text" id="txtLastName" value="" />

        </td>

    </tr>

    <tr>

        <td>

        <input type="button" value="Open Popup" onclick="OpenPopup()" />

        </td>

        <td>

            <input type="button" value="Send" onclick="SendToPopup()" />

        </td>

    </tr>

</table>

<script type="text/javascript">

    var popup;

    function OpenPopup() {

        popup = window.open("Popup.htm", "Popup", "width=300,height=100");

    };

    function SendToPopup() {

        if (popup != null && !popup.closed) {

            var lblFirstName = popup.document.getElementById("lblFirstName");

            var lblLastName = popup.document.getElementById("lblLastName");

            lblFirstName.innerHTML = document.getElementById("txtFirstName").value;

            lblLastName.innerHTML = document.getElementById("txtLastName").value;

            popup.focus();

        } else {

            alert("Popup has been closed.");

        }

    }

</script>

 

 

Screenshot