Home

GrassBlade
The Learning Curve

 
 
 

The Form The Analysis The Code

 
 
 
 

Appending Options from Child Windows

    As with many others at the site, this script came about as a result of helping someone at one the forums I frequent, The problem was how to append options from a child window to a selection list in the parent window. After pointing out the solution, I decided to play with the script and add a little more functionality. The following tutorial is the result.

    Unlike many of the scripts here, this page contains only one function -- OpenWin() -- all of the other code (for selecting the data and creating the selection list options) is located in the child window.

 
        
        
 

The Form

 
        
 
 
        
 

The Analysis

 
        
   

window function comments

main

openWin(url)

The url passed also contains the formname and selectname separated by a dot ('.')

child

location.search

substr(1) returns that portion of the url string after the question mark ('?')

child

selectAll(formObj, isInverse)

the isInverse boolean variable decides whether or not to invert all selections

child

addSelected(formObj)

uses the string created by location.search to build the options in the main page

    The OpenWin(url) function is nothing special. It simply takes the url as an argument, opens a child window, and then sets focus to it.

function openWin(url) {
var newWin = window.open(url,"popup","toolbar=no, width=500, height=250, left=0, top=0");
newWin.focus();
}

    In fact, the only interesting thing about the function is the url itself. As you can see from the HTML code below, I appended the formname and selection list name to the document's file name. This was done so that, if wanted, the function could be used with more than one selection list

<input type="button" value="Get Data" onClick="openWin('selPop1.html?mainpage.list1')">

    Since the form and selection list names are encoded in the url's location string, the first thing the child window does is parse the location with the location.search property. Note that substr(1) returns only that part of the string after the question mark. The resultant string (in this case: 'mainpage.list1') is then prefixed with the appropriate DOM and eval()ed to create an object with which we can later manipulate.

var selDOM = location.search.substr(1);
var selObj = eval('opener.document.' + selDOM);

    The rest of the child window consists of a form with elements and data, and two functions: addSelected() and selectAll(). The former function is activated when the user hits the 'Add Selected Names' button.

<input type="Button" name="Add" value="Add Selected Names" onClick="addSelected(this.form);">

    The function itself loops through the child window's form's checkboxes. Once it locates a checked one, it creates a new option for the parent's selection list. Note that I am substr()ing the checkbox's value so that the email address is assigned to the option's value and only the name appears as the option's text.

function addSelected(formObj) {
for(var i=0; i< formObj.length; i++)
{
 var e = formObj.elements[i];
 if ( (e.type=='checkbox') && (e.checked))
 {
   newItem = selObj.options.length;
   selObj.options.length++;
   txt = e.value.substr(0, e.value.indexOf('<'))
   selObj.options[newItem].text = txt;
   txt = e.value.substr(e.value.indexOf('<'))
   selObj.options[newItem].value = txt;
 }
}
}

    For a complete discussion of the selectAll() function see the Check Them All But...script/tutorial.

<input type="radio" name="selectall" value="1" onClick="selectAll(this.form,0);">Select All Names
function selectAll(formObj, isInverse)
{
 for (var i = 0; i < formObj.length; i++)
 {
  fldObj = formObj.elements[i];
  if (fldObj.type == 'checkbox')
   if(isInverse)
    fldObj.checked = (fldObj.checked) ? false : true;
   else fldObj.checked = true;
 }
}

 
     
 

The Code

 
 

 
     
     
     
 
 
 

The Form The Analysis The Code

 
 
 

Home

   

Last update: