Home|Sitemap|Contact

How can you select all items in a select list in a popup window and pass them to the parent window?

This example will open a popup window which has a select list. A button on the popup window allows you to select all items in the list and place the values on this page in a text field.

UPDATE: [21 Jan 2006] Changed method of returning values from the child popup window to call an update function in the parent page. Direct access to the field from the child did not work in Gecko engine browsers.

The Example:
Values From Popup: 

This page's code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005, 2006 Roderick Divilbiss">
<title>popup window send values to parent window</title>
<script type="text/javascript">
<!--
var childPopup = null;

function openPopup() {
    if (childPopup != null) {
        if (childPopup.closed == false)
            childPopup.close();
    }
    childPopup = window.open('pop_up_list2.htm','child','height=300,width=300,status=no,toolbar=no,menubar=no,location=no');
    return childPopup;
}

function updateValue(val) {
    var cVal = document.getElementById('cpValues').value;
    if (cVal=='') {
        cVal=val;
    }else{
        cVal+=','+val;
    }
    document.getElementById('cpValues').value=cVal;
}

function clearValue() {
    document.getElementById('cpValues').value='';
}
//-->
</script>
</head>

<body>
  <lable for "cpValues">Values From Popup:&nbsp;</label>
  <input type="text" id="cpValues" name="cpValues" size="50">
  <input type="button" value="Open Popup" onclick="openPopup();">
</div>
</body>

</html>

Popup window's code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005, 2006 Roderick Divilbiss">
<script type="text/javascript">
<!--
function selectOne() {
    var lst = document.getElementById('cpList');
    var val = lst[lst.selectedIndex].value;
    window.opener.updateValue(val);
}

function cls(){
    window.close();
}

function clr() {
    window.opener.clearValue();
}
//-->
</script>
<title>Pop Up List</title>
</head>

<body>
<p><select size="1" id="cpList" name="cpList">
     <option value="one">one</option>
     <option value="two">two</option>
     <option value="three">three</option>
     <option value="four">four</option>
   </select>
   <input type="button" value="Send to Parent" name="selectAll" onclick="selectOne();">
   <input type="button" value="Clear Parent" name="clear" onclick="clr();"></p>
<p><input type="button" value="Close Window" name="close" onclick="cls();"></p>
</body>

</html>