Pass values from a pop up (modal window) to parent page

November 1st, 2009 in Web UI Programming. 3 comments
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Loading ... Loading ...

Like it or not pop ups are there to stay and often values need to be passed from the pop up to the parent window. Although modal window based popups are currently less popular and being replaced by (slicker?) div based ‘pseudo’ popups, its still worthwhile to know how to pass values from a popup to its parent window.

  • In the parent window: Explanations are inline

    <html>
    <head>
    <script type="text/javascript">
     function showPopup(){
       //opens the pop up from where values will passed to this page
         window.showModalDialog('popup.html',window,'center:yes');
      }
    
    function setTheVal(valFromPopup){
      //this function will be called from the popup and the value passed in (valFromPopup).
      //Value of someElement in someForm in this page will be set to valFromPopup.
      document.aForm.aField.value=valFromPopup;
    }
    </script>
    </head>
    <body>
    <form name='aForm' method='post'>
    <input type='text' name='aField' />
    <a href='javascript:showPopup()'>Show popup</a>
    </form>
    </body>
    </html>
    
  • In the popup: Use the dialogArguments property as follows

    <html>
    <head>
    <script type="text/javascript">
     function submitVal(val){
         var myObj=window.dialogArguments;
          myObj.setTheVal(val); //calls the js method in the main page.
          window.close();
     }
    </script>
    </head>
    <body>
    <input type='button' onclick='submitVal("value from popup")' value='Put value in parent screen' />
    
    </body>
    
    </html>
    

Tags: ,

3 Responses to “Pass values from a pop up (modal window) to parent page”

  1. tito at
    says:

    it’s work.. and very simple..
    thanks bro..

  2. Aditya at
    says:

    hi, this code doesn’t seem to work in chrome . Any idea why?
    the myObj set in the child window is undefined and hence data is not sent to the parent window

  3. Athar at
    says:

    its a great article. when i tried with the second arguement, it sets the value “undefined”.

    please help.

Leave a Reply

Sponsors