In an effort to bring high ease of use, some of us provide a HTML styled select or drop-down list of selections the user can make. It's not too hard to have PHP build a variable that holds a select option list such as:

<?php
$OptionList 
""$First 1;
while (
$Row mysql_fetch_array($ResultMYSQL_ASSOC)) 
{
    
$ContactID $Row["ContactID"];
    
$Company $Row["Company"];
    if (
$First
    {
        
$SelMsg " selected"$First 0;
    } 
    else 
    {
        
$SelMsg "";
    }
    
$Line "<option value='".$ContactID."'".$SelMsg.">".$Company."</option>\n";
    
$OptionList .= $Line;
}
?>
We might (I do) have a button on a main screen that says [Select Contact] for the user to make their selection in a second window. This first window has a JavaScript function that opens a PHP page to bring back a number of values from the Contacts database like Company and Name, as read via a key value the user can supply in a form.
The first screen then contains this JavaScript function to just go "read" a Contacts record. The PHP screen GetVals.php is my own database read-and-post-back generic utility.
var newWin3 = null;
function doContactID() {
var ContactID = document.forms.BoothUpd.ContactID.value;
var URL = '../code/GetVals.php?Filename=Contacts&IDname=ContactID&IDval=
' + ContactID + '&Fields=Company,Type,RepID';
var params = 'top=20,left=80,width=300,height=200,minimized=yes,resizable=yes,
scrollbars=no,titlebar=no,menubar=no,status=no';
if (!newWin3 || newWin3.closed) {
newWin3 = window.open(URL,"",params);
}
if (newWin3.opener == null) {
newWin3.opener = self;
}
newWin3.focus();
}
Now, what I need to do is have the user open a second screen that selects a Contact, then posts that Contact ID back to the first screen. That's a good start, I also now want the first screen to go and do this read-and-post-back function that works nicely on it's own. To get this inter-window communication tied in, I will set this Javascript function to see if any change has been made to the value of the Contact ID and if so, call it's partner on the same page doContactID() to go and read-and-post-back for us.
function checkContactID() {
var ContactID = document.forms.Form1.ContactID.value;
var WasContactID = document.forms.Form1.WasContactID.value;
if (ContactID != WasContactID) {
doContactID();
}
}
Here's what makes this all work now that all my JavaScript functions are built in the first page. The second page, which is just a select list popup window will post the ContactID back to the first page AND tell the first page to do that nice read-and-post-back function, then close itself. The net result is the first page is now populated with the database read results based on the user's selection.
The second screen has anywhere within it's <Form> this button:
<input type="button" value="Select" onClick="doContact(this.form)">
When then user hits that button it does this:
<script language="javascript1.2">
function doContact(form) {
var ContactID = form.selectBox.options[form.selectBox.selectedIndex].value;
self.opener.document.forms['Form1'].ContactID.value = ContactID;
self.opener.window.checkContactID();
self.window.close();
}
</script>
Notice the self.opener... statements, that's what make the windows work together. Coming from a structured programming background, I was looking for straight down code, Web pages don't work that way. This is a way to get pages to act like "subroutines" and talk to each other.
Little smoke, lots of mirrors. Very useful.
About The Author:
Alan Gruskoff - Performant Systems, Sept. 2003. Alan is the lead developer at Performant Systems, a Linux / Database / Web design company in Pasadena CA, developers of the ExpoGrid System.