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

November 1st, 2009 in Web UI Programming. Add comment
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: ,

Leave a Reply

Sponsors