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.
<!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-2010 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('get-Popup-List-Values2.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: </label>
<input type="text" id="cpValues" name="cpValues" size="50">
<input type="button" value="Open Popup" onclick="openPopup();">
</div>
</body>
</html>
<!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-2010 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>
Date Validation Using JavaScript .
Cross-Browser Clipboard Copy .
Loading Images With Remote Scripting .
Why JavaScript In Hyperlinks Is Bad .
Change The Submit Button To Show Waiting For AJAX Response .
European Date Validation Using JavaScript .
Database Results To Client Side Array .
Reading Files With JavaScript .
AJAX For Plain Text And HTML .
