Wednesday, March 29, 2017

Good old popup dialog

Good old popup dialog example: parent page collects data from child popup dialog.


parent.html
<!doctype html>
<html><head><title>parent</title>
</head>
<body>
Name: <input type="text" id="txtName" readonly="readonly" />
<input type="button" value="Open Popup" onclick="openPopup()" />
</body>
<script type="text/javascript">
 var openPopup = function(){
  popup = window.open( "popup.html", "Select Name", "width=300,height=100;" );
  popup.focus();
 };
</script>
<html>


popup.html
<select name="ddlNames" id="ddlNames">
 <option value="Ken">Ken</option>
 <option value="Steve">Steve</option>
 <option value="Sam">Sam</option>
 <option value="Kirk">Kirk</option>
</select
<br /><br />
<input type="button" value="Make Selection" onclick="makeSelection()" />
<script type="text/javascript">
 var makeSelection = function(){
  if( window.opener != null && !window.opener.closed ){
   var nameSelected = document.getElementById( "ddlNames" ).value;
   var txtName = window.opener.document.getElementById( "txtName" );
   txtName.value = nameSelected;   
  } 
  window.close();
 };
</script>

No comments: