We have now seen how to access variables, functions and form fields between frames. Now throw in a constructor function that is on the parent page that is built by a form on a child frame. This demo will demonstrate building a business card object from a form in one frame and displaying the buisiness card object in the second frame.

1. The business card constructor function is on the parent frame.

   function businessCard(company, address, city, state, zip, phone,busPic, txtColor){
   	this.company = company;
   	this.address = address;
   	this.city = city;
   	this.state = state;
   	this.zip_code = zip;
   	this.phone_number = phone;
   	this.busPic = busPic;
   	this.textColor = txtColor;
   }
   

2. Create a global variable to hold the business card object that can be seen by any frame, put the variable on the parent html page.

   //global variable
   myCard = new businessCard();
   

3. The function to process a form that builds the business card is on the parent frame. Notice the function has one parameter. This function expects to receive a form object as input. This is so the function does not need to know what frame the form is on.
   
   If we did not pass the entire form as an object then this function would need to know the frame to access each value on the form. If the form was on top.frames[0].myForm, to get to the field named co:
       myCard.company = top.frames[0].myForm.co.value
   to avoid knowing the frame, pass the entire form as an object, top.frames[0] then becomes theForm!

   function buildCard(theForm){
   	myCard.company = theForm.co.value;
   	myCard.address = theForm.addr.value;
   	myCard.city = theForm.city.value;
   	myCard.state = theForm.state.value;
   	myCard.zip_code = theForm.zip.value;
   	myCard.phone_number = theForm.phone.value;
   	myCard.busPic = theForm.busType.value;
   	
   	
   	//process the radio buttons
   	for (x=0;x<theForm.busType.length;x++){
   		if (theForm.busType[x].checked)
   			myCard.busPic = theForm.busType[x].value;
   	}
   
   	//process the drop down box
   	for (x=0;x<theForm.textColor.length;x++){
   		if (theForm.textColor.options[x].selected){
   			myCard.txtColor = theForm.textColor.options[x].text;
   		}
   	}
   }
   

4. Create an html page with a form that will call the function passing the form as an object.

   buildCard(this.form)

5. Create an html page to display the business card object.

6. Click here to see the demo.